fix: Add edit button to empty state on certs (#68)

package-lock.json

@@ -2442,7 +2442,7 @@
       "integrity": "sha512-APBpZvdQrC1MJWMzk33V7FR2RhBRtnH2QPLqZzS+qia7PixwgWNlnX7UfHjhx+YWkM53GdsZKs40EBkSwADuMA=="
     },
     "@edx/edx-bootstrap": {
-      "version": "git://github.com/edx/edx-bootstrap.git#bd2f0bb753d2b654ff3da154c1c346951142644b",
+      "version": "git://github.com/edx/edx-bootstrap.git#71fd3272d235eb133cccefc1ce63f35a7696bf28",
       "from": "git://github.com/edx/edx-bootstrap.git#update-with-documentation-site",
       "requires": {
         "@fortawesome/fontawesome-svg-core": "^1.2.13",

src/components/ProfilePage/Certificates.jsx

@@ -94,8 +94,12 @@ class Certificates extends React.Component {
   }
 
   renderCertificates() {
-    if (this.props.certificates === null) {
-      return null;
+    if (this.props.certificates === null || this.props.certificates.length === 0) {
+      return (<FormattedMessage
+        id="profile.no.certificates"
+        defaultMessage="You don't have any certificates yet."
+        description="displays when user has no course completion certificates"
+      />);
     }
 
     return (
@@ -145,11 +149,14 @@ class Certificates extends React.Component {
           ),
           empty: (
             <div>
-              <FormattedMessage
-                id="profile.no.certificates"
-                defaultMessage="You don't have any certificates yet."
-                description="displays when user has no course completion certificates"
+              <EditableItemHeader
+                content={intl.formatMessage(messages['profile.certificates.my.certificates'])}
+                showEditButton
+                onClickEdit={this.handleOpen}
+                showVisibility={visibilityCourseCertificates !== null}
+                visibility={visibilityCourseCertificates}
               />
+              {this.renderCertificates()}
             </div>
           ),
           static: (