docs: style docs feedback widget (#8789)

datahub-project · Sep 7, 2023 · 8023dc0 · 8023dc0
1 parent 21b3400
commit 8023dc0
Show file tree

Hide file tree

Showing 7 changed files with 177 additions and 95 deletions.
diff --git a/docs-website/package.json b/docs-website/package.json
@@ -40,7 +40,8 @@
     "markprompt": "^0.1.7",
     "react": "^18.2.0",
     "react-dom": "18.2.0",
-    "sass": "^1.43.2"
+    "sass": "^1.43.2",
+    "uuid": "^9.0.0"
   },
   "browserslist": {
     "production": [

diff --git a/docs-website/src/components/Feedback/index.js b/docs-website/src/components/Feedback/index.js
@@ -1,44 +1,100 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
+import clsx from "clsx";
 import { supabase } from "./supabase";
-import styles from "./styles.module.css";
+import styles from "./styles.module.scss";
+import { LikeOutlined, DislikeOutlined, CheckCircleOutlined } from "@ant-design/icons";
+import { v4 as uuidv4 } from "uuid";
 
-const Feedback = ({ page }) => {
+const Feedback = () => {
   const [reaction, setReaction] = useState(null);
+  const [feedback, setFeedback] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const [reactionId, setReactionId] = useState(null);
 
   const handleReaction = async (selectedReaction) => {
-    console.log("Button clicked:", selectedReaction);
-    try {
-      const { data, error } = await supabase.from("feedback").insert([
-        {
-          page: window.location.href,
-          reaction: selectedReaction,
-        },
-      ]);
+    if (reaction !== selectedReaction) {
+      const uuid = uuidv4();
+      try {
+        const { error } = await supabase.from("reaction_feedback").insert([
+          {
+            id: uuid,
+            page: window.location.href,
+            reaction: selectedReaction,
+          },
+        ]);
 
-      if (error) {
+        if (error) {
+          console.error("Error submitting feedback:", error);
+          return;
+        }
+        setReactionId(uuid);
+        setReaction(selectedReaction);
+      } catch (error) {
         console.error("Error submitting feedback:", error);
-        return;
       }
+    } else {
+      setReaction(null);
+    }
+  };
 
-      setReaction(selectedReaction);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      if (feedback !== "" && reactionId !== null) {
+        const { error } = await supabase.from("written_feedback").insert([
+          {
+            feedback: feedback,
+            reaction_feedback_id: reactionId,
+          },
+        ]);
+
+        if (error) {
+          console.error("Error submitting feedback:", error);
+          return;
+        }
+        setSubmitted(true);
+      }
     } catch (error) {
       console.error("Error submitting feedback:", error);
     }
   };
 
   return (
-    <div className={styles.feedbackWidget}>
-      {reaction === null ? (
-        <div className={styles.reactionButtons}>
-          <h3>Is this page helpful?</h3>
-          <button className={styles.reaction} onClick={() => handleReaction("thumbs_up")}>👍</button>
-          <button className={styles.reaction} onClick={() => handleReaction("thumbs_down")}>👎</button>
-        </div>
-      ) : (
-        <div className={styles.feedbackMessage}>
-          Thanks for your feedback!
-        </div>
-      )}
+    <div className={styles.feedbackWrapper}>
+      <div className={styles.feedbackWidget}>
+        {!submitted ? (
+          <>
+            <div className={styles.feedbackButtons}>
+              <strong>Is this page helpful?</strong>
+              <div>
+                <button className={clsx(styles.feedbackButton, reaction === "positive" && styles.active)} onClick={() => handleReaction("positive")}>
+                  <LikeOutlined />
+                </button>
+                <button className={clsx(styles.feedbackButton, reaction === "negative" && styles.active)} onClick={() => handleReaction("negative")}>
+                  <DislikeOutlined />
+                </button>
+              </div>
+            </div>
+            {reaction !== null && (
+              <form className={styles.feedbackForm} onSubmit={handleSubmit}>
+                <textarea
+                  className={styles.feedbackText}
+                  value={feedback}
+                  rows="4"
+                  onChange={(e) => setFeedback(e.target.value)}
+                  placeholder="Your feedback (optional)"
+                ></textarea>
+                <button className="button button--secondary">Send</button>
+              </form>
+            )}
+          </>
+        ) : (
+          <div className={styles.feedbackMessage}>
+            <CheckCircleOutlined />
+            <strong>Thanks for your feedback!</strong>
+          </div>
+        )}
+      </div>
     </div>
   );
 };

diff --git a/docs-website/src/components/Feedback/styles.module.css b/docs-website/src/components/Feedback/styles.module.css
diff --git a/docs-website/src/components/Feedback/styles.module.scss b/docs-website/src/components/Feedback/styles.module.scss
@@ -0,0 +1,78 @@
+.feedbackWrapper {
+  display: flex;
+}
+
+.feedbackWidget {
+  min-height: 64px;
+  margin: 15px auto;
+  padding: 10px 20px;
+  border: var(--ifm-hr-border-color) 1px solid;
+  border-radius: 32px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.feedbackButtons {
+  strong {
+    margin-right: 4px;
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
+.feedbackForm {
+  margin: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 0.8rem;
+  button {
+    margin-left: auto;
+  }
+}
+
+.feedbackText {
+  width: 100%;
+  border: var(--ifm-hr-border-color) 1px solid;
+  border-radius: 0.4rem;
+  padding: 0.4rem;
+  font-family: "Manrope", sans-serif;
+}
+
+.feedbackButton {
+  width: 2rem;
+  height: 2rem;
+  text-align: center;
+  font-size: 1.25rem;
+  padding: 0.25rem;
+  border-radius: 1000em;
+  margin-left: 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  svg {
+    fill: var(--ifm-link-color);
+  }
+
+  &:hover,
+  &.active {
+    background: var(--ifm-link-color);
+    svg {
+      fill: var(--ifm-background-color);
+    }
+  }
+}
+
+.feedbackMessage {
+  display: flex;
+  align-items: center;
+  svg {
+    font-size: larger;
+    margin-right: 6px;
+    fill: var(--ifm-color-success);
+  }
+}
diff --git a/docs-website/src/components/Feedback/supabase.js b/docs-website/src/components/Feedback/supabase.js
@@ -1,8 +1,9 @@
 import { createClient } from "@supabase/supabase-js";
 
-const supabaseUrl = "";
-const supabaseKey = "";
+const supabaseUrl = "https://ttydafdojardufehywni.supabase.co";
+const supabaseKey =
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR0eWRhZmRvamFyZHVmZWh5d25pIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTMzNDk2NDksImV4cCI6MjAwODkyNTY0OX0.X2KKTPFzouQyXAQH3VTrL-fyhbdUtlPsLHIYtoACQss";
 
 export const supabase = createClient(supabaseUrl, supabaseKey);
 
-export default supabase;
+export default supabase;
diff --git a/docs-website/src/theme/DocItem/Footer/index.js b/docs-website/src/theme/DocItem/Footer/index.js
@@ -10,50 +10,29 @@ import Feedback from "../../../components/Feedback";
 
 function TagsRow(props) {
   return (
-    <div
-      className={clsx(
-        ThemeClassNames.docs.docFooterTagsRow,
-        "row margin-bottom--sm",
-      )}
-    >
+    <div className={clsx(ThemeClassNames.docs.docFooterTagsRow, "row margin-bottom--sm")}>
       <div className="col">
         <TagsListInline {...props} />
       </div>
     </div>
   );
 }
-function EditMetaRow({
-  editUrl,
-  lastUpdatedAt,
-  lastUpdatedBy,
-  formattedLastUpdatedAt,
-}) {
+function EditMetaRow({ editUrl, lastUpdatedAt, lastUpdatedBy, formattedLastUpdatedAt }) {
   return (
     <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, "row")}>
       <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
 
       <div className={clsx("col", styles.lastUpdated)}>
         {(lastUpdatedAt || lastUpdatedBy) && (
-          <LastUpdated
-            lastUpdatedAt={lastUpdatedAt}
-            formattedLastUpdatedAt={formattedLastUpdatedAt}
-            lastUpdatedBy={lastUpdatedBy}
-          />
+          <LastUpdated lastUpdatedAt={lastUpdatedAt} formattedLastUpdatedAt={formattedLastUpdatedAt} lastUpdatedBy={lastUpdatedBy} />
         )}
       </div>
     </div>
   );
 }
 export default function DocItemFooter() {
   const { metadata } = useDoc();
-  const {
-    editUrl,
-    lastUpdatedAt,
-    formattedLastUpdatedAt,
-    lastUpdatedBy,
-    tags,
-    unversionedId,
-  } = metadata;
+  const { editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags, unversionedId } = metadata;
   const canDisplayTagsRow = tags.length > 0;
   const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
   const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
@@ -62,10 +41,7 @@ export default function DocItemFooter() {
   }
   return (
     <>
-      <Feedback resource={unversionedId} />
-      <footer
-        className={clsx(ThemeClassNames.docs.docFooter, "docusaurus-mt-lg")}
-      >
+      <footer className={clsx(ThemeClassNames.docs.docFooter, "docusaurus-mt-lg")}>
         {canDisplayTagsRow && <TagsRow tags={tags} />}
         {canDisplayEditMetaRow && (
           <EditMetaRow
@@ -76,6 +52,7 @@ export default function DocItemFooter() {
           />
         )}
       </footer>
+      <Feedback resource={unversionedId} />
     </>
   );
 }
diff --git a/docs-website/yarn.lock b/docs-website/yarn.lock
@@ -9919,6 +9919,11 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+
 uvu@^0.5.0:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"