diff --git a/docs-website/package.json b/docs-website/package.json index b826881cf0ba8..778b400d9a564 100644 --- 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 index 9a9eb1b3e9a8c..ecabca445bd48 100644 --- 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 ( -
- {reaction === null ? ( -
-

Is this page helpful?

- - -
- ) : ( -
- Thanks for your feedback! -
- )} +
+
+ {!submitted ? ( + <> +
+ Is this page helpful? +
+ + +
+
+ {reaction !== null && ( +
+ + +
+ )} + + ) : ( +
+ + Thanks for your feedback! +
+ )} +
); }; diff --git a/docs-website/src/components/Feedback/styles.module.css b/docs-website/src/components/Feedback/styles.module.css deleted file mode 100644 index 098780e859889..0000000000000 --- a/docs-website/src/components/Feedback/styles.module.css +++ /dev/null @@ -1,36 +0,0 @@ -.feedbackWidget { - margin: 15px 15px; - padding: 20px 20px; - border: var(--ifm-hr-border-color) 1px solid; - border-radius: 10px; - text-align: center; -} - -.title { - text-align: center; -} - -.widget .grid { - display: flex; - flex-direction: row; - justify-content: center; - min-height: 50px; -} - -.widget .cell { - width: 50px; -} - -.reaction { - padding: 10px; -} - -.reaction:hover { - background-color: skyblue; - cursor: pointer; -} - -.widget .footer { - margin-top: 10px; - margin-left: 0; -} diff --git a/docs-website/src/components/Feedback/styles.module.scss b/docs-website/src/components/Feedback/styles.module.scss new file mode 100644 index 0000000000000..b0fa3d7d1bd2b --- /dev/null +++ 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 index 800261718550e..2f3b8e4306565 100644 --- 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; \ No newline at end of file +export default supabase; diff --git a/docs-website/src/theme/DocItem/Footer/index.js b/docs-website/src/theme/DocItem/Footer/index.js index 754f7bf4167c5..94b6c7734f9ee 100644 --- a/docs-website/src/theme/DocItem/Footer/index.js +++ b/docs-website/src/theme/DocItem/Footer/index.js @@ -10,35 +10,21 @@ import Feedback from "../../../components/Feedback"; function TagsRow(props) { return ( -
+
); } -function EditMetaRow({ - editUrl, - lastUpdatedAt, - lastUpdatedBy, - formattedLastUpdatedAt, -}) { +function EditMetaRow({ editUrl, lastUpdatedAt, lastUpdatedBy, formattedLastUpdatedAt }) { return (
{editUrl && }
{(lastUpdatedAt || lastUpdatedBy) && ( - + )}
@@ -46,14 +32,7 @@ function EditMetaRow({ } 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 ( <> - -