on clicking Edit of certificate config show prompt

cms/static/js/certificates/spec/views/certificate_details_spec.js

@@ -41,6 +41,11 @@ function(_, Course, CertificatesCollection, CertificateModel, CertificateDetails
         inputSignatoryTitle: '.signatory-title-input',
         inputSignatoryOrganization: '.signatory-organization-input'
     };
+    var verifyAndConfirmPrompt = function(promptSpy, promptText){
+        ViewHelpers.verifyPromptShowing(promptSpy, gettext(promptText));
+        ViewHelpers.confirmPrompt(promptSpy);
+        ViewHelpers.verifyPromptHidden(promptSpy);
+    };
 
     beforeEach(function() {
         window.course = new Course({
@@ -133,7 +138,16 @@ function(_, Course, CertificatesCollection, CertificateModel, CertificateDetails
                 expect(this.view.$('.edit')).toExist();
             });
 
-            it('should change to "edit" mode when clicking the Edit button', function(){
+            it('should change to "edit" mode when clicking the Edit button and confirming the prompt', function(){
+                expect(this.view.$('.action-edit .edit')).toExist();
+                var promptSpy = ViewHelpers.createPromptSpy();
+                this.view.$('.action-edit .edit').click();
+                verifyAndConfirmPrompt(promptSpy, gettext('Edit this certificate?'));
+                expect(this.model.get('editing')).toBe(true);
+            });
+
+            it('should not show confirmation prompt when clicked on "edit" in case of inactive certificate', function(){
+                this.model.set('is_active', false);
                 expect(this.view.$('.action-edit .edit')).toExist();
                 this.view.$('.action-edit .edit').click();
                 expect(this.model.get('editing')).toBe(true);

cms/static/js/certificates/views/certificate_details.js

@@ -7,9 +7,10 @@ define([ // jshint ignore:line
     'gettext',
     'js/views/baseview',
     'js/certificates/models/signatory',
-    'js/certificates/views/signatory_details'
+    'js/certificates/views/signatory_details',
+    'js/views/utils/view_utils'
 ],
-function($, _, str, gettext, BaseView, SignatoryModel, SignatoryDetailsView) {
+function($, _, str, gettext, BaseView, SignatoryModel, SignatoryDetailsView, ViewUtils) {
     'use strict';
     var CertificateDetailsView = BaseView.extend({
         tagName: 'div',
@@ -36,7 +37,20 @@ function($, _, str, gettext, BaseView, SignatoryModel, SignatoryDetailsView) {
         editCertificate: function(event) {
             // Flip the model into 'editing' mode
             if (event && event.preventDefault) { event.preventDefault(); }
-            this.model.set('editing', true);
+            var self = this;
+            if (this.model.get("is_active") === true){
+                ViewUtils.confirmThenRunOperation(
+                    gettext('Edit this certificate?'),
+                    gettext('This certificate has already been activated and is live. Are you sure you want to continue editing?'),
+                    gettext('Yes, allow edits to the active Certificate'),
+                    function() {
+                        return self.model.set('editing', true);
+                    }
+                );
+            }
+            else{
+                this.model.set('editing', true);
+            }
         },
 
         render: function(showDetails) {