docs: added the "Edit this page" button to components' pages (#2604)

* feat: added Edit this page button

* feat: added logic for Edit page button

* refactor: refactorng after review

* refactor: moved link variable to file createPage.js

* refactor: refactoring tablet view

src/Button/button-group.mdx

@@ -1,5 +1,5 @@
 ---
-title: 'Button Group'
+title: 'ButtonGroup'
 type: 'component'
 components:
 - ButtonGroup

src/DataTable/dataviews.mdx

@@ -2,6 +2,10 @@
 title: 'Data views'
 type: 'component'
 components:
+- DataTable
+- DataTableTable
+- TableControlBar
+- TableFooter
 - Table
 - TableCell
 - TableHeaderCell

src/DataTable/tablefilters.mdx

@@ -1,5 +1,5 @@
 ---
-title: 'Table Filters'
+title: 'TableFilters'
 type: 'component'
 components:
 - TextFilter

src/Form/README.md

@@ -1,5 +1,5 @@
 ---
-title: 'Forms'
+title: 'Form'
 type: 'component'
 components:
 - Form

src/Form/input-group.mdx

@@ -1,5 +1,5 @@
 ---
-title: 'Input Group'
+title: 'InputGroup'
 type: 'component'
 categories:
 - Forms

src/Overlay/README.md

@@ -1,5 +1,5 @@
 ---
-title: 'Overlays'
+title: 'Overlay'
 type: 'component'
 components:
 - Overlay

src/PageBanner/README.md

@@ -1,5 +1,5 @@
 ---
-title: 'Page Banner'
+title: 'PageBanner'
 type: 'component'
 components:
 - PageBanner

src/ProgressBar/README.md

@@ -1,5 +1,5 @@
 ---
-title: 'Progress Bar'
+title: 'ProgressBar'
 type: 'component'
 components:
 - ProgressBar

www/src/components/LeaveFeedback.tsx

@@ -22,7 +22,6 @@ function LeaveFeedback({ isNavLink, ...props }: LeaveFeedbackProps) {
         onClick={handleLinkFeedbackClick}
         href={FEEDBACK_URL}
         target="_blank"
-        rel="noopener noreferrer"
         {...props}
       >
         {leaveFeedbackLinkTitle}

www/src/components/PageEditBtn/index.tsx

@@ -0,0 +1,54 @@
+import React, { AnchorHTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Hyperlink, Nav } from '~paragon-react';
+
+export interface PageEditBtnProps extends Partial<AnchorHTMLAttributes<HTMLAnchorElement>> {
+  githubEditPath: string,
+  isNavLink?: boolean;
+}
+
+function PageEditBtn({ githubEditPath, isNavLink, ...props }: PageEditBtnProps) {
+  const pageEditLinkTitle = 'Edit this page';
+
+  const handlePageEditBtnClick = () => {
+    global.analytics.track('openedx.paragon.docs.page_edit.clicked');
+  };
+
+  if (isNavLink) {
+    return (
+      <Nav.Link
+        onClick={handlePageEditBtnClick}
+        href={githubEditPath}
+        target="_blank"
+        {...props}
+      >
+        {pageEditLinkTitle}
+      </Nav.Link>
+    );
+  }
+
+  return (
+    <Button
+      size="sm"
+      as={Hyperlink}
+      destination={githubEditPath}
+      variant="tertiary"
+      onClick={handlePageEditBtnClick}
+      target="_blank"
+      {...props}
+    >
+      {pageEditLinkTitle}
+    </Button>
+  );
+}
+
+PageEditBtn.propTypes = {
+  githubEditPath: PropTypes.string.isRequired,
+  isNavLink: PropTypes.bool,
+};
+
+PageEditBtn.defaultProps = {
+  isNavLink: false,
+};
+
+export default PageEditBtn;

www/src/components/PageLayout.tsx

@@ -17,6 +17,7 @@ import {
   Sticky,
   useMediaQuery,
   breakpoints,
+  Stack,
 } from '~paragon-react';
 import ComponentsList from './ComponentsList';
 import Header from './header';
@@ -26,6 +27,7 @@ import Toc from './Toc';
 import { SettingsContext } from '../context/SettingsContext';
 import LeaveFeedback from './LeaveFeedback';
 import AutoToc from './AutoToc';
+import PageEditBtn from './PageEditBtn';
 
 if (process.env.NODE_ENV === 'development') {
   /* eslint-disable-next-line global-require */
@@ -40,6 +42,7 @@ export interface ILayout {
   tocData: Array<number>,
   tab?: string,
   isAutoToc?: boolean,
+  githubEditPath?: string,
 }
 
 function Layout({
@@ -50,6 +53,7 @@ function Layout({
   tocData,
   isAutoToc,
   tab,
+  githubEditPath,
 }: ILayout) {
   const isMobile = useMediaQuery({ maxWidth: breakpoints.extraLarge.minWidth });
   const { settings } = useContext(SettingsContext);
@@ -88,7 +92,12 @@ function Layout({
               {children}
               <Container size="md">
                 <hr />
-                <LeaveFeedback className="mb-5" />
+                <Stack direction="horizontal" gap={2}>
+                  {isMdx && (
+                    <PageEditBtn className="mb-5" githubEditPath={githubEditPath ?? ''} />
+                  )}
+                  <LeaveFeedback className="mb-5" />
+                </Stack>
               </Container>
             </Col>
             <Col
@@ -142,6 +151,15 @@ function Layout({
           <Nav.Item>
             <LeaveFeedback className="muted-link" isNavLink />
           </Nav.Item>
+          {isMdx && (
+            <Nav.Item>
+              <PageEditBtn
+                className="muted-link"
+                githubEditPath={githubEditPath ?? ''}
+                isNavLink
+              />
+            </Nav.Item>
+          )}
           <div className="flex-grow-1" />
           <Nav.Link
             className="muted-link"
@@ -176,6 +194,7 @@ Layout.propTypes = {
   hideFooterComponentMenu: PropTypes.bool,
   isMdx: PropTypes.bool,
   tab: PropTypes.string,
+  githubEditPath: PropTypes.string,
 };
 
 Layout.defaultProps = {
@@ -185,6 +204,7 @@ Layout.defaultProps = {
   isMdx: false,
   tab: undefined,
   isAutoToc: false,
+  githubEditPath: undefined,
 };
 
 export default Layout;

www/src/templates/component-page-template.tsx

@@ -4,11 +4,13 @@ import PropTypes from 'prop-types';
 import { graphql, Link } from 'gatsby';
 import { MDXProvider } from '@mdx-js/react';
 import { MDXRenderer } from 'gatsby-plugin-mdx';
+import classNames from 'classnames';
 import {
   Container,
   Alert,
   breakpoints,
   useMediaQuery,
+  Stack,
 } from '~paragon-react';
 import { SettingsContext } from '../context/SettingsContext';
 import { DEFAULT_THEME } from '../../theme-config';
@@ -19,6 +21,7 @@ import SEO from '../components/SEO';
 import LinkedHeading from '../components/LinkedHeading';
 import ComponentsUsage from '../components/insights/ComponentsUsage';
 import LeaveFeedback from '../components/LeaveFeedback';
+import PageEditBtn from '../components/PageEditBtn';
 
 export interface IPageTemplate {
   data: {
@@ -41,6 +44,7 @@ export interface IPageTemplate {
   pageContext: {
     scssVariablesData: Record<string, string>,
     componentsUsageInsights: string[],
+    githubEditPath: string,
   }
 }
 
@@ -50,7 +54,7 @@ export type ShortCodesTypes = {
 
 export default function PageTemplate({
   data: { mdx, components: componentNodes },
-  pageContext: { scssVariablesData, componentsUsageInsights },
+  pageContext: { scssVariablesData, componentsUsageInsights, githubEditPath },
 }: IPageTemplate) {
   const isMobile = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });
   const [showMinimizedTitle, setShowMinimizedTitle] = useState(false);
@@ -127,6 +131,7 @@ export default function PageTemplate({
       showMinimizedTitle={showMinimizedTitle}
       isMdx
       tocData={getTocData()}
+      githubEditPath={githubEditPath}
     >
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title={mdx.frontmatter.title} />
@@ -137,10 +142,24 @@ export default function PageTemplate({
             <p className="small mb-0">{mdx.frontmatter.notes}</p>
           </Alert>
         )}
-        <div className="d-flex justify-content-between align-items-start">
-          <h1 className="mb-4">{mdx.frontmatter.title}</h1>
-          <LeaveFeedback />
-        </div>
+        <Stack
+          className={classNames('justify-content-between', {
+            'flex-column-reverse align-items-start': isMobile,
+          })}
+          direction="horizontal"
+        >
+          <h1>
+            {mdx.frontmatter.title}
+          </h1>
+          <Stack
+            className={classNames('mb-2', { 'justify-content-end': isMobile })}
+            direction="horizontal"
+            gap={2}
+          >
+            <PageEditBtn githubEditPath={githubEditPath} />
+            <LeaveFeedback />
+          </Stack>
+        </Stack>
         <MDXProvider components={shortcodes}>
           <MDXRenderer>{mdx.body}</MDXRenderer>
         </MDXProvider>

www/utils/createPages.js

@@ -29,6 +29,7 @@ async function createPages(graphql, actions, reporter) {
               components
             }
             slug
+            fileAbsolutePath
           }
         }
       }
@@ -47,6 +48,7 @@ async function createPages(graphql, actions, reporter) {
   for (const { node } of components) {
     const componentDir = node.slug.split('/')[0];
     const variablesPath = path.resolve(__dirname, `../../src/${componentDir}/_variables.scss`);
+    const githubEditPath = `https://github.com/openedx/paragon/edit/master/src${node.fileAbsolutePath.split('src')[1]}`;
     let scssVariablesData = {};
 
     if (fs.existsSync(variablesPath)) {
@@ -67,6 +69,7 @@ async function createPages(graphql, actions, reporter) {
         components: node.frontmatter.components || [],
         scssVariablesData,
         componentsUsageInsights: Object.keys(componentsUsage),
+        githubEditPath,
       },
     });
   }