[DOCS] Was This Helpful section (#9426)

Co-authored-by: Jose Tobar <josectobar@gmail.com>

.github/workflows/ci.yml

@@ -244,6 +244,7 @@ jobs:
       - name: Build docs
         env:
           NODE_OPTIONS: --max_old_space_size=4096
+          POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY }}
         run: cd docs/docusaurus && yarn install && bash ../build_docs
 
   cloud-tests:

docs/docusaurus/.env

@@ -0,0 +1 @@
+POSTHOG_API_KEY=dummy_value

docs/docusaurus/docs/cloud/connect/connect_lp.md

@@ -3,6 +3,7 @@ sidebar_label: 'Connect GX Cloud'
 title: 'Connect GX Cloud'
 hide_title: true
 description: Connect GX Cloud to your deployment environment.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/cloud/gx_cloud_lp.md

@@ -7,6 +7,7 @@ pagination_next: null
 pagination_prev: null
 slug: '/cloud/'
 displayed_sidebar: gx_cloud
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/deployment_patterns/aws_lp.md

@@ -4,6 +4,7 @@ hide_title: true
 sidebar_label: "Amazon Web Services (AWS)"
 description: "Integrate Great Expectations with AWS"
 id: aws_lp
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/guides/connecting_to_your_data/connect_to_data_lp.md

@@ -4,6 +4,7 @@ title: 'Connect to a Data Source'
 hide_title: true
 id: connect_to_data_lp
 description: Connect to data stored on Amazon S3, Google Cloud Storage (GCS), Microsoft Azure Blob Storage, or local filesystems.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/guides/connecting_to_your_data/manage_data_assets_lp.md

@@ -4,6 +4,7 @@ title: 'Manage Data Assets'
 hide_title: true
 id: manage_data_assets_lp
 description: Request data from a Data Source and organize Batches in file-based and SQL Data Assets.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/guides/expectations/add_features_custom_expectations_lp.md

@@ -4,6 +4,7 @@ title: 'Add features to Custom Expectations'
 hide_title: true
 id: add_features_custom_expectations_lp
 description: Add additional functionality to your Custom Expectations.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/guides/expectations/create_manage_expectations_lp.md

@@ -4,6 +4,7 @@ title: 'Create and manage Expectations and Expectation Suites'
 hide_title: true
 id: create_manage_expectations_lp
 description: Create and manage Expectations and Expectation Suites.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/guides/expectations/custom_expectations_lp.md

@@ -4,6 +4,7 @@ title: 'Create and manage Custom Expectations'
 hide_title: true
 id: custom_expectations_lp
 description: Create and manage Custom Expectations.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/guides/expectations/data_assistants_lp.md

@@ -4,6 +4,7 @@ title: 'Data Assistants'
 hide_title: true
 id: data_assistants_lp
 description: Use the Missingness Data Assistant to create Expectation Suites.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/guides/expectations/expectations_lp.md

@@ -4,6 +4,7 @@ title: 'Create Expectations'
 id: expectations_lp
 hide_title: true
 description: Create and manage Expectations and Expectation Suites.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/guides/setup/configure_data_contexts_lp.md

@@ -4,6 +4,7 @@ title: 'Configure Data Contexts'
 hide_title: true
 id: configure_data_contexts_lp
 description: Instantiate and convert a Data Context.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/guides/setup/get_started_lp.md

@@ -4,6 +4,7 @@ title: 'Get started with Great Expectations'
 hide_title: true
 id: get_started_lp
 description: Install Great Expectations and initialize your deployment.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/guides/setup/setup_overview.md

@@ -1,6 +1,7 @@
 ---
 sidebar_label: 'GX installation and configuration workflow'
 title: "Great Expectations installation and configuration workflow"
+hide_feedback_survey: true
 ---
 import TechnicalTag from '../../../reference/learn/term_tags/_tag.mdx';
 import GxData from '../../../components/_data.jsx';

docs/docusaurus/docs/oss/guides/setup/setup_overview_lp.md

@@ -4,6 +4,7 @@ title: 'Configure your Great Expectations environment'
 hide_title: true
 id: setup_overview_lp
 description: Configure GX in your specific environment.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/guides/validation/checkpoints/checkpoint_lp.md

@@ -4,6 +4,7 @@ title: 'Manage Checkpoints'
 hide_title: true
 id: checkpoint_lp
 description: Add validation data, create and configure Checkpoints, and pass in-mameory DataFrames.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/guides/validation/validate_data_lp.md

@@ -4,6 +4,7 @@ title: 'Validate Data'
 hide_title: true
 id: validate_data_lp
 description: Validate Data, save Validation Results, run Actions, and create Data Docs.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/guides/validation/validation_actions/actions_lp.md

@@ -4,6 +4,7 @@ title: 'Configure Actions'
 hide_title: true
 id: actions_lp
 description: Configure Actions to send Validation Result notifications, update Data Docs, and store Validation Results.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/oss/oss.md

@@ -7,6 +7,7 @@ pagination_next: null
 pagination_prev: null
 slug: '/oss/'
 displayed_sidebar: gx_oss
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docs/reference/learn/reference_overview.md

@@ -7,6 +7,7 @@ description: Supplemental information that will help you get the most out of Gre
 slug: '/reference/learn/'
 displayed_sidebar: 'learn'
 hide_table_of_contents: true
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/docusaurus.config.js

@@ -3,6 +3,8 @@
 const remarkNamedSnippets = require('./scripts/remark-named-snippets/index');
 const remarkCodeImport = require('remark-code-import');
 
+require('dotenv').config()
+
 module.exports = {
   title: 'Great Expectations',
   tagline: 'Always know what to expect from your data.',
@@ -23,6 +25,15 @@ module.exports = {
         id: 'GTM-K63L45F', // GTM Container ID
       },
     ],
+    [
+      'posthog-docusaurus',
+      {
+        apiKey: process.env.POSTHOG_API_KEY,
+        enableInDevelopment: true
+        // for more information on how to set up this value go to
+        // https://greatexpectations.atlassian.net/wiki/spaces/DVRL/pages/956334083/Manage+the+feedback+survey
+      },
+    ],
   ],
 
   scripts: [

docs/docusaurus/package.json

@@ -31,7 +31,9 @@
     "clsx": "1.2.1",
     "docusaurus-gtm-plugin": "0.0.2",
     "docusaurus-plugin-sass": "0.2.2",
+    "dotenv": "^16.4.1",
     "plugin-image-zoom": "ataft/plugin-image-zoom",
+    "posthog-docusaurus": "^2.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-loadable": "5.5.0",

docs/docusaurus/src/components/WasThisHelpful/index.js

@@ -0,0 +1,27 @@
+import React, {useState} from 'react';
+import styles from './styles.module.css';
+import {useLocation} from "@docusaurus/router";
+
+export default function WasThisHelpful(){
+
+    const { pathname } = useLocation();
+    const [feedbackSent, setFeedbackSent] = useState(false)
+
+    const handleFeedbackReaction = (eventName) => {
+        if(!feedbackSent){
+            setFeedbackSent(true)
+            posthog.capture(eventName, { doc_url: pathname })
+        }
+    };
+
+    return <>
+            <hr className={styles.feedbackDivider}/>
+            <section className={styles.feedbackCard}>
+                <h3 className={styles.feedbackCardTitle}>Was this helpful?</h3>
+                <div className={styles.feedbackCardActions}>
+                    <button className={feedbackSent ? styles.inactiveFeedbackButton : styles.feedbackButton} onClick={() => handleFeedbackReaction('docs_feedback.yes')}>Yes</button>
+                    <button className={feedbackSent ? styles.inactiveFeedbackButton : styles.feedbackButton} onClick={() => handleFeedbackReaction('docs_feedback.no')}>No</button>
+                </div>
+            </section>
+        </>
+}

docs/docusaurus/src/components/WasThisHelpful/styles.module.css

@@ -0,0 +1,64 @@
+.feedbackDivider {
+    border-top: 1px solid var(--gray-400);
+    margin-top: 3rem;
+    margin-bottom: 3em;
+}
+
+.feedbackCard {
+    background-color: var(--gray-100);
+    border: 1px solid var(--gray-200);
+    border-radius: 6px;
+    box-shadow: 0 3px 6px -1px var(--gray-300);
+
+    display: flex;
+    flex-direction: row;
+    gap: 1.5rem;
+    margin: auto;
+    padding: 0.75rem;
+    width: 100%;
+    max-width: 30rem;
+    justify-content: center;
+    align-items: center;
+}
+
+.feedbackCardTitle {
+    font-size: var(--p-font-size);
+    font-weight: var(--ifm-font-weight-semibold);
+    margin: 0;
+}
+
+.feedbackCardActions{
+    display: flex;
+    gap: 0.5rem;
+}
+
+.feedbackButton {
+    border-color: var(--ifm-color-primary);
+    background: none;
+    border: 1px solid var(--ifm-color-primary);
+    border-radius: 50rem;
+    color: var(--ifm-color-primary);
+    cursor: pointer;
+    font-size: var(--p-md-font-size);
+    font-weight: var(--ifm-font-weight-semibold);
+    padding: 0.25rem;
+    text-align: center;
+    min-width: 4.5rem;
+}
+
+.feedbackButton:hover {
+    background: var(--orange-100);
+    color: var(--ifm-color-primary);
+}
+
+.inactiveFeedbackButton {
+    background: var(--gray-200);
+    border: 1px solid transparent;
+    border-radius: 50rem;
+    color: var(--gray-500);
+    font-size: var(--p-font-size);
+    font-weight: var(--ifm-font-weight-semibold);
+    padding: 0.25rem;
+    text-align: center;
+    min-width: 4.5rem;
+}

docs/docusaurus/src/theme/MDXContent/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import {MDXProvider} from '@mdx-js/react';
+import MDXComponents from '@theme/MDXComponents';
+import WasThisHelpful from "../../components/WasThisHelpful";
+
+export default function MDXContent({children}) {
+  const {
+    metadata: {frontMatter},
+  } = children.type;
+  return <MDXProvider components={MDXComponents}>
+      {children}
+    { !frontMatter.hide_feedback_survey && <WasThisHelpful/> }
+  </MDXProvider>;
+}

docs/docusaurus/versioned_docs/version-0.17/cloud/gx_cloud_lp.md

@@ -2,6 +2,7 @@
 sidebar_label: 'GX Cloud'
 title: 'GX Cloud'
 description: Get started with GX Cloud and learn more about GX Cloud features and functionality.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/versioned_docs/version-0.17/deployment_patterns/aws_lp.md

@@ -3,6 +3,7 @@ title: "Integrate Great Expectations with AWS"
 sidebar_label: "Amazon Web Services (AWS)"
 description: "Integrate Great Expectations with AWS"
 id: aws_lp
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/versioned_docs/version-0.17/guides/connecting_to_your_data/connect_to_data_lp.md

@@ -3,6 +3,7 @@ sidebar_label: 'Connect to source data'
 title: 'Connect to source data'
 id: connect_to_data_lp
 description: Connect to source data stored on Amazon S3, Google Cloud Storage (GCS), Microsoft Azure Blob Storage, or local filesystems.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/versioned_docs/version-0.17/guides/connecting_to_your_data/manage_data_assets_lp.md

@@ -3,6 +3,7 @@ sidebar_label: 'Manage Data Assets'
 title: 'Manage Data Assets'
 id: manage_data_assets_lp
 description: Request data from a Data Source and organize Batches in file-based and SQL Data Assets.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/versioned_docs/version-0.17/guides/expectations/add_features_custom_expectations_lp.md

@@ -3,6 +3,7 @@ sidebar_label: 'Add features to Custom Expectations'
 title: 'Add features to Custom Expectations'
 id: add_features_custom_expectations_lp
 description: Add additional functionality to your Custom Expectations.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/versioned_docs/version-0.17/guides/expectations/create_manage_expectations_lp.md

@@ -3,6 +3,7 @@ sidebar_label: 'Create and manage Expectations and Expectation Suites'
 title: 'Create and manage Expectations and Expectation Suites'
 id: create_manage_expectations_lp
 description: Create and manage Expectations and Expectation Suites.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/versioned_docs/version-0.17/guides/expectations/custom_expectations_lp.md

@@ -3,6 +3,7 @@ sidebar_label: 'Create and manage Custom Expectations'
 title: 'Create and manage Custom Expectations'
 id: custom_expectations_lp
 description: Create and manage Custom Expectations.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/versioned_docs/version-0.17/guides/expectations/data_assistants_lp.md

@@ -3,6 +3,7 @@ sidebar_label: 'Data Assistants'
 title: 'Data Assistants'
 id: data_assistants_lp
 description: Use the Onboarding Data Assistant to create Expectation Suites.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/versioned_docs/version-0.17/guides/expectations/expectations_lp.md

@@ -3,6 +3,7 @@ sidebar_label: 'Create Expectations'
 title: 'Create Expectations'
 id: expectations_lp
 description: Create and manage Expectations and Expectation Suites.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/versioned_docs/version-0.17/guides/setup/configure_data_contexts_lp.md

@@ -3,6 +3,7 @@ sidebar_label: 'Configure Data Contexts'
 title: 'Configure Data Contexts'
 id: configure_data_contexts_lp
 description: Instantiate and convert a Data Context.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';

docs/docusaurus/versioned_docs/version-0.17/guides/setup/get_started_lp.md

@@ -3,6 +3,7 @@ sidebar_label: 'Get started with GX'
 title: 'Get started with Great Expectations'
 id: get_started_lp
 description: Install Great Expectations and initialize your deployment.
+hide_feedback_survey: true
 ---
 
 import LinkCardGrid from '@site/src/components/LinkCardGrid';