User Feedback Widget (#18639)

* user feedback widget implementation

* add user feedback widget to python docs site

* update margin

* add apache license

* one more license

* turn off feedback widget on python site

* update copy

* format

* add event value field

* turn on widget on Python site

docs/python_docs/_static/feedback.css

@@ -0,0 +1,37 @@
+.feedback-container {
+  text-align: center;
+}
+
+.feedback-answer-container {
+  display: inline-block;
+}
+
+.feedback-question {
+  display: inline-block;
+  padding: 0.5em 1em 0.5em 1em;
+}
+
+.feedback-answer {
+  display: inline-block;
+  padding: 0.5em 1em 0.5em 1em;
+  color: #048ccc;
+  cursor: pointer;
+}
+
+.feedback-answer:hover {
+  color: #ffffff;
+  background-color: #048ccc;
+}
+
+.feedback-thank-you {
+  display: none;
+  padding: 0.5em 1em 0.5em 1em;
+}
+
+.feedback-hr-top {
+  margin-top: 50px;
+}
+
+.feedback-hr-bottom {
+  margin-bottom: 30px;
+}

docs/python_docs/_static/feedback.js

@@ -0,0 +1,33 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+$(document).ready(function() {
+  $(".feedback-answer").on("click", function () {
+    $(".feedback-question").remove();
+    $(".feedback-answer-container").remove();
+    $(".feedback-thank-you").show();
+    ga("send", {
+      hitType: "event",
+      eventCategory: "Did this page help you?",
+      eventAction: $(this).attr("data-response"),
+      eventLabel: window.location.pathname || "unknown",
+      eventValue: $(this).attr("data-response") === "yes" ? 1 : 0
+    });
+  });
+});

docs/python_docs/themes/mx-theme/mxtheme/feedback.html

@@ -0,0 +1,10 @@
+<hr class="feedback-hr-top" />
+<div class="feedback-container">
+    <div class="feedback-question">Did this page help you?</div>
+    <div class="feedback-answer-container">
+        <div class="feedback-answer yes-link" data-response="yes">Yes</div>
+        <div class="feedback-answer no-link" data-response="no">No</div>
+    </div>
+    <div class="feedback-thank-you">Thanks for your feedback!</div>
+</div>
+<hr class="feedback-hr-bottom" />

docs/python_docs/themes/mx-theme/mxtheme/layout.html

@@ -64,10 +64,12 @@
     '_static/sphinx_materialdesign_theme.css',
     '_static/fontawesome/all.css',
     '_static/fonts.css',
+    '_static/feedback.css',
 ] %}
 
     {%- block header %}
-	<script type="text/javascript" src="{{ pathto('_static/sphinx_materialdesign_theme.js', 1) }} "></script>
+        <script type="text/javascript" src="{{ pathto('_static/sphinx_materialdesign_theme.js', 1) }} "></script>
+        <script type="text/javascript" src="{{ pathto('_static/feedback.js', 1) }}"></script>
     {% endblock %}
 {%- block relbar1 %}{% endblock %}
 {%- block relbar2 %}{% include "relations.html" %}{% endblock %}
@@ -85,6 +87,7 @@
 {%- block document %}
         <div class="page-content" role="main">
         {% block body %} {% endblock %}
+        {% include "feedback.html" %}
         </div>
         <div class="side-doc-outline">
             <div class="side-doc-outline--content">

docs/static_site/src/_includes/feedback.html

@@ -0,0 +1,10 @@
+<hr class="feedback-hr-top" />
+<div class="feedback-container">
+  <div class="feedback-question">Did this page help you?</div>
+  <div class="feedback-answer-container">
+    <div class="feedback-answer yes-link" data-response="yes">Yes</div>
+    <div class="feedback-answer no-link" data-response="no">No</div>
+  </div>
+  <div class="feedback-thank-you">Thanks for your feedback!</div>
+</div>
+<hr class="feedback-hr-bottom" />

docs/static_site/src/_includes/head.html

@@ -20,4 +20,7 @@
   <script src="{{'/assets/js/globalSearch.js'|relative_url}}" defer></script>
   <script src="{{'/assets/js/clipboard.js'|relative_url}}" defer></script>
   <script src="{{'/assets/js/copycode.js'|relative_url}}" defer></script>
+  {%- if page.feedback == true and jekyll.environment == "production" -%}
+    <script src="{{'/assets/js/feedback.js'|relative_url}}" defer></script>
+  {%- endif -%}
 </head>

docs/static_site/src/_layouts/page_api.html

@@ -48,5 +48,8 @@ <h3>Tutorials</h3>
     </div>
     <div class="col-9">
         {{ content }}
+        {%- if page.feedback == true and jekyll.environment == "production" -%}
+            {%- include feedback.html -%}
+        {%- endif -%}
     </div>
 </div>

docs/static_site/src/_sass/feedback.scss

@@ -0,0 +1,39 @@
+.feedback-container {
+  text-align: center;
+}
+
+.feedback-answer-container {
+  display: inline-block;
+}
+
+.feedback-question {
+  display: inline-block;
+  padding: 0.5em 1em 0.5em 1em;
+}
+
+.feedback-answer {
+  display: inline-block;
+  padding: 0.5em 1em 0.5em 1em;
+  color: #048ccc;
+  cursor: pointer;
+}
+
+.feedback-answer:hover {
+  color: #ffffff;
+  background-color: #048ccc;
+}
+
+.feedback-thank-you {
+  display: none;
+  padding: 0.5em 1em 0.5em 1em;
+}
+
+.feedback-hr-top {
+  margin: 1em;
+  margin-top: 50px;
+}
+
+.feedback-hr-bottom {
+  margin: 1em;
+  margin-bottom: 30px;
+}

docs/static_site/src/assets/js/feedback.js

@@ -0,0 +1,33 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+$(document).ready(function() {
+  $(".feedback-answer").on("click", function () {
+    $(".feedback-question").remove();
+    $(".feedback-answer-container").remove();
+    $(".feedback-thank-you").show();
+    ga("send", {
+      hitType: "event",
+      eventCategory: "Did this page help you?",
+      eventAction: $(this).attr("data-response"),
+      eventLabel: window.location.pathname || "unknown",
+      eventValue: $(this).attr("data-response") === "yes" ? 1 : 0
+    });
+  });
+});

docs/static_site/src/assets/main.scss

@@ -8,3 +8,4 @@ body {
 @import "minima";
 @import "globalSearch";
 @import "generalVersionDropdown";
+@import "feedback";