docs(nx-dev): Add feedback CTA (#22455)

nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx

@@ -8,9 +8,11 @@ import { renderMarkdown } from '@nx/nx-dev/ui-markdoc';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
 import { cx } from '@nx/nx-dev/ui-primitives';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { collectHeadings, TableOfContents } from './table-of-contents';
 import { RelatedDocumentsSection } from './related-documents-section';
+import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
+import { FeedbackDialog } from '@nx/nx-dev/feature-feedback';
 
 export function DocViewer({
   document,
@@ -51,6 +53,17 @@ export function DocViewer({
     return splits[splits.length - 1];
   }
 
+  const [showFeedback, setShowFeedback] = useState(false);
+
+  function submitIdeaFeedback(feedback: string) {
+    // sanitize the feedback from the user script tags/other malicious code
+    const sanitizedFeedback = feedback.replace(/(<([^>]+)>)/gi, '');
+
+    sendCustomEvent('feedback', 'feedback', 'idea', undefined, {
+      feedback: sanitizedFeedback,
+    });
+  }
+
   return (
     <>
       <NextSeo
@@ -104,19 +117,55 @@ export function DocViewer({
               {!hideTableOfContent && (
                 <div
                   className={cx(
-                    'fixed top-36 right-[max(2rem,calc(50%-55rem))] z-20 hidden w-60 overflow-y-auto bg-white py-10 text-sm dark:bg-slate-900 xl:block'
+                    'fixed top-36 right-[max(2rem,calc(50%-55rem))] z-20 hidden w-60 overflow-y-auto bg-white text-sm dark:bg-slate-900 xl:block'
                   )}
                 >
                   <TableOfContents
                     elementRef={ref}
                     path={router.basePath}
                     headings={vm.tableOfContent}
+                    document={document}
                   >
-                    {widgetData.githubStarsCount > 0 && (
-                      <GitHubStarWidget
-                        starsCount={widgetData.githubStarsCount}
-                      />
-                    )}
+                    <>
+                      {widgetData.githubStarsCount > 0 && (
+                        <GitHubStarWidget
+                          starsCount={widgetData.githubStarsCount}
+                        />
+                      )}
+                      <div className="flex items-center justify-center my-4 pl-2 pr-2 space-x-2 border rounded-md border-slate-200 hover:border-slate-400 dark:border-slate-700 print:hidden">
+                        <button
+                          type="button"
+                          aria-label="Give feedback on this page"
+                          title="Give feedback of this page"
+                          className="px-4 py-2 border-transparent hover:text-slate-900 dark:hover:text-sky-400 whitespace-nowrap font-bold"
+                          onClick={() => setShowFeedback(true)}
+                        >
+                          Feedback
+                        </button>
+                      </div>
+                      <div className="flex items-center justify-center my-4 pl-2 pr-2 space-x-2 border rounded-md border-slate-200 hover:border-slate-400 dark:border-slate-700 print:hidden">
+                        {document.filePath ? (
+                          <a
+                            aria-hidden="true"
+                            href={[
+                              'https://github.com/nrwl/nx/blob/master',
+                              document.filePath
+                                .replace(
+                                  'nx-dev/nx-dev/public/documentation',
+                                  'docs'
+                                )
+                                .replace('public/documentation', 'docs'),
+                            ].join('/')}
+                            target="_blank"
+                            rel="noreferrer"
+                            title="Edit this page on GitHub"
+                            className="px-4 py-2 border-transparent hover:text-slate-900 dark:hover:text-sky-400 whitespace-nowrap font-bold"
+                          >
+                            Edit this page
+                          </a>
+                        ) : null}
+                      </div>
+                    </>
                   </TableOfContents>
                 </div>
               )}
@@ -135,22 +184,25 @@ export function DocViewer({
               />
             </div>
           </div>
-          <div className="flex w-full items-center space-x-2 pt-24 pb-24 sm:px-6 lg:pb-16 xl:px-8">
+          <div
+            className={`flex w-full items-center space-x-2 pt-24 pb-24 sm:px-6 lg:pb-16 ${
+              hideTableOfContent ? '' : 'xl:hidden'
+            }`}
+          >
             <div className="ml-4 flex h-0.5 w-full flex-grow rounded bg-slate-50 dark:bg-slate-800/60" />
             <div className="relative z-0 inline-flex flex-shrink-0 rounded-md shadow-sm">
-              <a
-                aria-hidden="true"
-                href="https://github.com/nrwl/nx/issues/new?assignees=&labels=type%3A+docs&template=3-documentation.md"
-                target="_blank"
-                rel="noreferrer"
-                title="Report an issue on GitHub"
+              <button
+                type="button"
+                aria-label="Give feedback on this page"
+                title="Give feedback of this page"
                 className={`relative inline-flex items-center rounded-l-md ${
                   // If there is no file path for this page then don't show edit button.
                   document.filePath ? '' : 'rounded-r-md '
                 }border border-slate-200 bg-white px-4 py-2 text-xs font-medium text-slate-600 focus-within:ring-blue-500 hover:bg-slate-50 focus:z-10 focus:outline-none focus:ring-1 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800`}
+                onClick={() => setShowFeedback(true)}
               >
-                Report an issue
-              </a>
+                Feedback
+              </button>
               {document.filePath ? (
                 <a
                   aria-hidden="true"
@@ -172,6 +224,11 @@ export function DocViewer({
           </div>
         </div>
       </div>
+      <FeedbackDialog
+        isOpen={showFeedback}
+        onClose={() => setShowFeedback(false)}
+        onFeedbackSubmit={submitIdeaFeedback}
+      />
       <Footer />
     </>
   );

nx-dev/feature-doc-viewer/src/lib/table-of-contents.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { cx } from '@nx/nx-dev/ui-primitives';
 import { useHeadingsObserver } from './use-headings-observer';
+import { ProcessedDocument } from '@nx/nx-dev/models-document';
 
 interface Heading {
   id: string;
@@ -49,11 +50,13 @@ export function TableOfContents({
   headings,
   path,
   children,
+  document,
 }: {
   elementRef: any;
   headings: Heading[];
   path: string;
   children: React.ReactNode;
+  document: ProcessedDocument;
 }): JSX.Element {
   const headingLevelTargets: number[] = [1, 2, 3]; // matching to: H1, H2, H3...
   const items = headings.filter(

nx-dev/feature-feedback/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

nx-dev/feature-feedback/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

nx-dev/feature-feedback/README.md

@@ -0,0 +1,7 @@
+# feature-feedback
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test feature-feedback` to execute the unit tests via [Jest](https://jestjs.io).

nx-dev/feature-feedback/jest.config.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+  displayName: 'feature-feedback',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/nx-dev/feature-feedback',
+};

nx-dev/feature-feedback/project.json

@@ -0,0 +1,11 @@
+{
+  "name": "feature-feedback",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "nx-dev/feature-feedback/src",
+  "projectType": "library",
+  "tags": ["scope:nx-dev", "type:feature"],
+  "targets": {
+    "lint": {},
+    "test": {}
+  }
+}

nx-dev/feature-feedback/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/feedback-dialog';

nx-dev/feature-feedback/src/lib/feature-feedback.module.css

@@ -0,0 +1,63 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
+
+.closebutton {
+  position: absolute;
+  top: 0.4rem;
+  right: 0.7rem;
+  padding: 0.5rem;
+  cursor: pointer;
+  font-size: 1.5rem;
+}
+
+.fadeinout {
+  -webkit-animation: fadeinout 0.5s; /* Safari, Chrome and Opera > 12.1 */
+  -moz-animation: fadeinout 0.5s; /* Firefox < 16 */
+  -ms-animation: fadeinout 0.5s; /* Internet Explorer */
+  -o-animation: fadeinout 0.5s; /* Opera < 12.1 */
+  animation: fadeinout 0.5s;
+}
+
+@keyframes fadeinout {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Firefox < 16 */
+@keyframes fadeinout {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadeinout {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadeinout {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}