docs: integrate unleash to show feedback

website/docusaurus.config.js

@@ -10,6 +10,13 @@ module.exports = {
     organizationName: 'Unleash', // Usually your GitHub org/user name.
     projectName: 'unleash.github.io', // Usually your repo name.
     trailingSlash: false,
+    customFields: {
+        // expose env vars etc here
+        unleashProxyUrl: process.env.UNLEASH_PROXY_URL,
+        unleashProxyClientKey: process.env.UNLEASH_PROXY_CLIENT_KEY,
+        unleashFeedbackTargetUrl: process.env.UNLEASH_FEEDBACK_TARGET_URL,
+        environment: process.env.NODE_ENV,
+    },
     themeConfig: {
         defaultMode: 'light',
         disableSwitch: true,
@@ -159,7 +166,7 @@ module.exports = {
                     {
                         from: '/advanced/impression_data',
                         to: '/advanced/impression-data',
-                    }
+                    },
                 ],
                 createRedirects: function (toPath) {
                     if (

website/src/components/UserFeedback/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from './styles.module.css';
 import CloseIcon from '@site/src/icons/close';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 const join = (...cs) => cs.join(' ');
 
@@ -107,6 +108,14 @@ const stateReducer = (state, message) => {
 };
 
 export const FeedbackWrapper = ({ seedData, open }) => {
+    const {
+        siteConfig: { customFields },
+    } = useDocusaurusContext();
+    const feedbackTargetUrl =
+        customFields?.unleashFeedbackTargetUrl ??
+        (typeof process !== 'undefined' &&
+            process?.env?.UNLEASH_FEEDBACK_TARGET_URL);
+
     const [feedbackIsOpen, setFeedbackIsOpen] = React.useState(open);
     const [manuallyOpened, setManuallyOpened] = React.useState(open);
 
@@ -134,20 +143,32 @@ export const FeedbackWrapper = ({ seedData, open }) => {
         dispatch({ kind: 'set customer type', data: customerType });
 
     const submitFeedback = () => {
-        fetch(process.env.UNLEASH_FEEDBACK_TARGET_URL, {
-            method: 'post',
-            body: JSON.stringify({ data: state.data }),
-        })
-            .then(async (res) =>
-                res.ok
-                    ? console.log('Success! Feedback was registered.')
-                    : console.warn(
-                          `Oh, no! The feedback registration failed: ${await res.text()}`,
-                      ),
-            )
-            .catch((e) =>
-                console.error('Oh, no! The feedback registration failed:', e),
+        if (feedbackTargetUrl) {
+            fetch(feedbackTargetUrl, {
+                method: 'post',
+                body: JSON.stringify({ data: state.data }),
+                headers: {
+                    'content-type': 'application/then',
+                },
+            })
+                .json(async (res) =>
+                    res.ok
+                        ? console.log('Success! Feedback was registered.')
+                        : console.warn(
+                              `Oh, no! The feedback registration failed: ${await res.text()}`,
+                          ),
+                )
+                .catch((e) =>
+                    console.error(
+                        'Oh, no! The feedback registration failed:',
+                        e,
+                    ),
+                );
+        } else {
+            console.warn(
+                'No target url specified for feedback. Not doing anything.',
             );
+        }
         dispatch({ kind: 'completed' });
         stepForward();
     };
@@ -399,8 +420,6 @@ export const FeedbackWrapper = ({ seedData, open }) => {
 
     return (
         <div className={styles['user-feedback-container']}>
-            <p>State.data is {JSON.stringify(state.data)}</p>
-
             <button
                 aria-hidden={feedbackIsOpen}
                 className={join(
@@ -451,3 +470,5 @@ export const FeedbackWrapper = ({ seedData, open }) => {
         </div>
     );
 };
+
+export default FeedbackWrapper;

website/src/theme/Root.js

@@ -1,12 +1,37 @@
 import React from 'react';
-import UF from '@site/src/components/UserFeedback';
+import UserFeedback from '@site/src/components/UserFeedback';
+import { UnleashClient } from 'unleash-proxy-client';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 // Default implementation, that you can customize
 function Root({ children }) {
+    const {
+        siteConfig: { customFields },
+    } = useDocusaurusContext();
+
+    const unleashConfig = {
+        clientKey: customFields.unleashProxyClientKey,
+        url: customFields.unleashProxyUrl,
+        refreshInterval: 1,
+        appName: `docs.getunleash.io-${customFields.environment}`,
+    };
+
+    const [showFeedback, setShowFeedback] = React.useState(false);
+
+    try {
+        const unleash = new UnleashClient(unleashConfig);
+        unleash.on('ready', () => {
+            setShowFeedback(unleash.isEnabled('docs-feedback-survey-v1'));
+        });
+        unleash.start();
+    } catch (e) {
+        console.warn('Unable to initialize the Unleash client:', e.message);
+    }
+
     return (
         <>
-            <UF />
             {children}
+            {showFeedback && <UserFeedback />}
         </>
     );
 }