feat: added Edit this page CTA to non-component pages

openedx · Sep 28, 2023 · ad358f6 · ad358f6
1 parent 322c80d
commit ad358f6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx
@@ -64,9 +64,20 @@ function Layout({
           title
         }
       }
+    allSitePage {
+      nodes {
+        component
+      }
+    }
     }
   `);
 
+  const currentURL = typeof window !== 'undefined' ? window.location.pathname.split('/')[2] : '';
+  const filteredData = data.allSitePage.nodes.filter(item => !item.component.includes('components'));
+  const elementWithLayout = filteredData.find(item => item.component.includes(currentURL))?.component;
+  const componentName = elementWithLayout?.split('src')[1];
+  const foundationLinkBase = `https://github.com/openedx/paragon/blob/master/www/src${componentName}`;
+
   return (
     <div className="d-flex flex-column">
       <Header
@@ -93,9 +104,7 @@ function Layout({
               <Container size="md">
                 <hr />
                 <Stack direction="horizontal" gap={2}>
-                  {isMdx && (
-                    <PageEditBtn className="mb-5" githubEditPath={githubEditPath ?? ''} />
-                  )}
+                  <PageEditBtn className="mb-5" githubEditPath={githubEditPath || foundationLinkBase} />
                   <LeaveFeedback className="mb-5" />
                 </Stack>
               </Container>

diff --git a/www/src/pages/insights.tsx b/www/src/pages/insights.tsx
@@ -27,14 +27,21 @@ const {
   lastModified: analysisLastUpdated,
 } = dependentProjectsAnalysis;
 
-interface TabsDataType {
+export interface TabsDataType {
   components: string[],
   hooks: string[],
   utils: string[],
   icons: string[],
 }
 
-export default function InsightsPage({ pageContext: { tab } }: { pageContext: { tab: string } }) {
+export interface InsightsPageTypes {
+  pageContext: {
+    tab: string,
+    githubEditPath: string
+  }
+}
+
+export default function InsightsPage({ pageContext: { tab, githubEditPath } }: InsightsPageTypes) {
   const { settings } = useContext(SettingsContext);
   const { paragonTypes = {}, isParagonIcon = () => false } = useContext(InsightsContext) as IInsightsContext;
   const {
@@ -61,7 +68,7 @@ export default function InsightsPage({ pageContext: { tab } }: { pageContext: {
     }
   };
   return (
-    <Layout isAutoToc tab={tab}>
+    <Layout isAutoToc tab={tab} githubEditPath={githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title="Usage Insights" />
       <Container size={settings.containerWidth} className="py-5">
@@ -113,5 +120,6 @@ export default function InsightsPage({ pageContext: { tab } }: { pageContext: {
 InsightsPage.propTypes = {
   pageContext: PropTypes.shape({
     tab: PropTypes.oneOf(Object.values(INSIGHTS_TABS)),
+    githubEditPath: PropTypes.string,
   }).isRequired,
 };
diff --git a/www/utils/createPages.js b/www/utils/createPages.js
@@ -78,7 +78,7 @@ async function createPages(graphql, actions, reporter) {
     createPage({
       path: pagePath,
       component: require.resolve('../src/pages/insights.tsx'),
-      context: { tab },
+      context: { tab, githubEditPath: 'https://github.com/openedx/paragon/blob/master/www/src/pages/insights.tsx' },
     });
   });