Merge branch 'vs/qrtly-recon-alert' into 'master'

Add qrtly reconciliation alert [RUN ALL RSPEC] [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!63181

app/views/admin/dashboard/index.html.haml

@@ -9,6 +9,9 @@
       dismissible: true.to_s } }
       = notice[:message].html_safe
 
+- if Gitlab.ee? && display_upcoming_reconciliation_alert?
+  #js-qrtly-reconciliation-alert{ data: upcoming_reconciliation_hash }
+
 - if @license.present?
   .license-panel.gl-mt-5
     = render_if_exists 'admin/licenses/summary'

ee/app/assets/javascripts/admin/components/qrtly_reconciliation_alert.vue

+<script>
+import { GlAlert, GlSprintf } from '@gitlab/ui';
+import Cookie from 'js-cookie';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { formatDate, getDayDifference } from '~/lib/utils/datetime_utility';
+import { s__, __, sprintf } from '~/locale';
+
+const i18n = {
+  title: s__('Admin|Quarterly reconcilliation will occur on %{qrtlyDate}'),
+  description: s__(`Admin|The number of maximum users for your instance
+is currently exceeding the number of users in license.
+On %{qrtlyDate}, GitLab will process a quarterly reconciliation
+and automatically bill you a prorated amount for the overage.
+There is no action needed from you. If you have a credit card on file,
+it will be charged. Otherwise, you will receive an invoice.`),
+  learnMore: s__('Admin|Learn more about quarterly reconcilliation'),
+  contactSupport: __('Contact support'),
+};
+
+const CONTACT_SUPPORT_URL = 'https://about.gitlab.com/support/#contact-support';
+
+const qrtlyReconciliationHelpPageUrl = helpPagePath('subscriptions/self_managed/index', {
+  anchor: 'quarterly-subscription-reconciliation',
+});
+
+export default {
+  name: 'QrtlyReconciliationAlert',
+  components: {
+    GlAlert,
+    GlSprintf,
+  },
+  props: {
+    date: {
+      type: Date,
+      required: true,
+    },
+    cookieKey: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    alertTitle() {
+      return sprintf(this.$options.i18n.title, { qrtlyDate: this.formattedDate });
+    },
+    formattedDate() {
+      return formatDate(this.date, 'isoDate');
+    },
+  },
+  methods: {
+    handleDismiss() {
+      Cookie.set(this.cookieKey, true, {
+        expires: getDayDifference(new Date(), new Date(this.date)),
+      });
+    },
+  },
+  i18n,
+  CONTACT_SUPPORT_URL,
+  qrtlyReconciliationHelpPageUrl,
+};
+</script>
+
+<template>
+  <gl-alert
+    data-testid="qrtly-reconciliation-alert"
+    variant="info"
+    :title="alertTitle"
+    :primary-button-text="$options.i18n.learnMore"
+    :primary-button-link="$options.qrtlyReconciliationHelpPageUrl"
+    :secondary-button-text="$options.i18n.contactSupport"
+    :secondary-button-link="$options.CONTACT_SUPPORT_URL"
+    @dismiss="handleDismiss"
+  >
+    <gl-sprintf :message="$options.i18n.description">
+      <template #qrtlyDate>
+        <span>{{ formattedDate }}</span>
+      </template>
+    </gl-sprintf>
+  </gl-alert>
+</template>

ee/app/assets/javascripts/admin/init_qrtly_reconciliation_alert.js

+import Vue from 'vue';
+import QrtlyReconciliationAlert from './components/qrtly_reconciliation_alert.vue';
+
+export const initQrtlyReconciliationAlert = (selector = '#js-qrtly-reconciliation-alert') => {
+  const el = document.querySelector(selector);
+
+  if (!el) {
+    return false;
+  }
+
+  const { reconciliationDate, cookieKey } = el.dataset;
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(QrtlyReconciliationAlert, {
+        props: {
+          date: new Date(reconciliationDate),
+          cookieKey,
+        },
+      });
+    },
+  });
+};

ee/app/assets/javascripts/pages/admin/dashboard/index.js

+import { initQrtlyReconciliationAlert } from 'ee/admin/init_qrtly_reconciliation_alert';
+
+initQrtlyReconciliationAlert();

ee/app/assets/javascripts/pages/admin/licenses/show/index.js

+import { initQrtlyReconciliationAlert } from 'ee/admin/init_qrtly_reconciliation_alert';
+
+initQrtlyReconciliationAlert();

ee/app/views/admin/licenses/show.html.haml

 - page_title _('License')
 
+- if display_upcoming_reconciliation_alert?
+  #js-qrtly-reconciliation-alert{ data: upcoming_reconciliation_hash }
+
 %h3.page-title
   = _('Your License')
   - if @license&.trial?

ee/spec/features/admin/admin_dashboard_spec.rb

@@ -3,15 +3,15 @@
 require 'spec_helper'
 
 RSpec.describe 'Admin Dashboard' do
+  before do
+    admin = create(:admin)
+    sign_in(admin)
+    gitlab_enable_admin_mode_sign_in(admin)
+  end
+
   describe 'Users statistic' do
     let_it_be(:users_statistics) { create(:users_statistics) }
 
-    before do
-      admin = create(:admin)
-      sign_in(admin)
-      gitlab_enable_admin_mode_sign_in(admin)
-    end
-
     describe 'license' do
       before do
         allow(License).to receive(:current).and_return(license)
@@ -72,4 +72,41 @@ RSpec.describe 'Admin Dashboard' do
       expect(page).to have_content("Total users 78")
     end
   end
+
+  describe 'qrtly reconciliation alert', :js do
+    shared_examples 'a visible alert' do
+      it 'displays an alert' do
+        expect(page).to have_selector('[data-testid="qrtly-reconciliation-alert"]')
+      end
+    end
+
+    shared_examples 'a hidden alert' do
+      it 'does not display an alert' do
+        expect(page).not_to have_selector('[data-testid="qrtly-reconciliation-alert"]')
+      end
+    end
+
+    context 'on self-managed' do
+      before do
+        allow(Gitlab).to receive(:ee?).and_return(true)
+      end
+
+      context 'when qrtly reconciliation is available' do
+        before do
+          create(:upcoming_reconciliation, :self_managed)
+          visit(admin_root_path)
+        end
+
+        it_behaves_like 'a visible alert'
+      end
+
+      context 'when qrtly reconciliation is not available' do
+        before do
+          visit(admin_root_path)
+        end
+
+        it_behaves_like 'a hidden alert'
+      end
+    end
+  end
 end

ee/spec/features/admin/licenses/admin_views_license_spec.rb

@@ -150,4 +150,50 @@ RSpec.describe "Admin views license" do
       end
     end
   end
+
+  describe 'qrtly reconciliation alert', :js do
+    shared_examples 'a visible alert' do
+      it 'displays an alert' do
+        expect(page).to have_selector('[data-testid="qrtly-reconciliation-alert"]')
+      end
+    end
+
+    shared_examples 'a hidden alert' do
+      it 'does not display an alert' do
+        expect(page).not_to have_selector('[data-testid="qrtly-reconciliation-alert"]')
+      end
+    end
+
+    context 'on dotcom' do
+      before do
+        allow(Gitlab).to receive(:com?).and_return(true)
+        visit(admin_license_path)
+      end
+
+      it_behaves_like 'a hidden alert'
+    end
+
+    context 'on self-managed' do
+      before do
+        allow(Gitlab).to receive(:ee?).and_return(true)
+      end
+
+      context 'when qrtly reconciliation is available' do
+        before do
+          create(:upcoming_reconciliation, :self_managed)
+          visit(admin_license_path)
+        end
+
+        it_behaves_like 'a visible alert'
+      end
+
+      context 'when qrtly reconciliation is not available' do
+        before do
+          visit(admin_license_path)
+        end
+
+        it_behaves_like 'a hidden alert'
+      end
+    end
+  end
 end

ee/spec/frontend/admin/components/qrtly_reconciliation_alert_spec.js

+import { GlAlert } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Cookie from 'js-cookie';
+import QrtlyReconciliationAlert from 'ee/admin/components/qrtly_reconciliation_alert.vue';
+
+jest.mock('js-cookie', () => ({
+  set: jest.fn(),
+}));
+
+describe('Qrtly Reconciliation Alert', () => {
+  let wrapper;
+  const reconciliationDate = new Date('2020-07-10');
+
+  const createComponent = () => {
+    return shallowMount(QrtlyReconciliationAlert, {
+      propsData: {
+        cookieKey: 'key',
+        date: reconciliationDate,
+      },
+    });
+  };
+
+  const findAlert = () => wrapper.find(GlAlert);
+
+  beforeEach(() => {
+    wrapper = createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('Rendering', () => {
+    it('renders alert title with date', () => {
+      expect(findAlert().attributes('title')).toContain(`occur on 2020-07-10`);
+    });
+
+    it('has the correct link to the help page', () => {
+      expect(findAlert().attributes('primarybuttonlink')).toBe(
+        '/help/subscriptions/self_managed/index#quarterly-subscription-reconciliation',
+      );
+    });
+
+    it('has the correct link to contact support', () => {
+      expect(findAlert().attributes('secondarybuttonlink')).toBe(
+        'https://about.gitlab.com/support/#contact-support',
+      );
+    });
+  });
+
+  describe('methods', () => {
+    it('sets the cookie on dismis', () => {
+      findAlert().vm.$emit('dismiss');
+
+      expect(Cookie.set).toHaveBeenCalledTimes(1);
+      expect(Cookie.set).toHaveBeenCalledWith('key', true, { expires: 4 });
+    });
+  });
+});

locale/gitlab.pot

@@ -2791,9 +2791,18 @@ msgstr ""
 msgid "Admin|Admin notes"
 msgstr ""
 
+msgid "Admin|Learn more about quarterly reconcilliation"
+msgstr ""
+
 msgid "Admin|Note"
 msgstr ""
 
+msgid "Admin|Quarterly reconcilliation will occur on %{qrtlyDate}"
+msgstr ""
+
+msgid "Admin|The number of maximum users for your instance is currently exceeding the number of users in license. On %{qrtlyDate}, GitLab will process a quarterly reconciliation and automatically bill you a prorated amount for the overage. There is no action needed from you. If you have a credit card on file, it will be charged. Otherwise, you will receive an invoice."
+msgstr ""
+
 msgid "Admin|View pending user approvals"
 msgstr ""