Replace <Example* /> examples in app with <GiveFeedbackAddon /> (and add repo/edit for fixture docs sites).

Co-authored-by: Anders Näsman <andersn@spotify.com>
Signed-off-by: Eric Peterson <ericpeterson@spotify.com>

cypress/fixtures/mkdocs.yml

@@ -1,5 +1,8 @@
 site_name: e2e Fixture Documentation
 site_description: Documentation used for end-to-end tests of TechDocs in Backstage.
+repo_url: https://github.com/backstage/backstage
+edit_uri: edit/master/cypress/fixtures/docs
+
 nav:
   - Home: index.md
   - Sub-page 1: sub-page-one.md

mkdocs.yml

@@ -1,5 +1,7 @@
 site_name: 'Backstage'
 site_description: 'Main documentation for Backstage features and platform APIs'
+repo_url: https://github.com/backstage/backstage
+edit_uri: edit/master/docs
 
 plugins:
   - techdocs-core

packages/app/src/App.tsx

@@ -68,6 +68,7 @@ import {
   TechDocsIndexPage,
   TechDocsReaderPage,
   techdocsPlugin,
+  GiveFeedbackAddon,
 } from '@backstage/plugin-techdocs';
 import {
   UserSettingsPage,
@@ -93,13 +94,6 @@ import { techDocsPage } from './components/techdocs/TechDocsPage';
 import { ApacheAirflowPage } from '@backstage/plugin-apache-airflow';
 import { PermissionedRoute } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
-import {
-  ExampleContent,
-  ExampleHeader,
-  ExamplePrimarySidebar,
-  ExampleSecondarySidebar,
-  ExampleSubHeader,
-} from './components/techdocs/ExampleAddons';
 
 const app = createApp({
   apis,
@@ -188,11 +182,7 @@ const routes = (
     >
       {techDocsPage}
       <TechDocsAddons>
-        <ExampleHeader />
-        <ExampleSubHeader />
-        <ExamplePrimarySidebar />
-        <ExampleSecondarySidebar />
-        <ExampleContent />
+        <GiveFeedbackAddon />
       </TechDocsAddons>
     </Route>
     <Route

packages/app/src/components/catalog/EntityPage.tsx

@@ -104,7 +104,10 @@ import {
   isRollbarAvailable,
 } from '@backstage/plugin-rollbar';
 import { EntitySentryContent } from '@backstage/plugin-sentry';
-import { EntityTechdocsContent } from '@backstage/plugin-techdocs';
+import {
+  EntityTechdocsContent,
+  GiveFeedbackAddon,
+} from '@backstage/plugin-techdocs';
 import { EntityTodoContent } from '@backstage/plugin-todo';
 import { Button, Grid } from '@material-ui/core';
 import BadgeIcon from '@material-ui/icons/CallToAction';
@@ -139,13 +142,6 @@ import { EntityGoCdContent, isGoCdAvailable } from '@backstage/plugin-gocd';
 
 import React, { ReactNode, useMemo, useState } from 'react';
 import { TechDocsAddons } from '@backstage/techdocs-addons';
-import {
-  ExampleContent,
-  ExampleHeader,
-  ExamplePrimarySidebar,
-  ExampleSecondarySidebar,
-  ExampleSubHeader,
-} from '../techdocs/ExampleAddons';
 
 const customEntityFilterKind = ['Component', 'API', 'System'];
 
@@ -407,11 +403,7 @@ const serviceEntityPage = (
     <EntityLayout.Route path="/docs" title="Docs">
       <EntityTechdocsContent>
         <TechDocsAddons>
-          <ExampleHeader />
-          <ExampleSubHeader />
-          <ExamplePrimarySidebar />
-          <ExampleSecondarySidebar />
-          <ExampleContent />
+          <GiveFeedbackAddon />
         </TechDocsAddons>
       </EntityTechdocsContent>
     </EntityLayout.Route>
@@ -482,11 +474,7 @@ const websiteEntityPage = (
     <EntityLayout.Route path="/docs" title="Docs">
       <EntityTechdocsContent>
         <TechDocsAddons>
-          <ExampleHeader />
-          <ExampleSubHeader />
-          <ExamplePrimarySidebar />
-          <ExampleSecondarySidebar />
-          <ExampleContent />
+          <GiveFeedbackAddon />
         </TechDocsAddons>
       </EntityTechdocsContent>
     </EntityLayout.Route>
@@ -529,11 +517,7 @@ const defaultEntityPage = (
     <EntityLayout.Route path="/docs" title="Docs">
       <EntityTechdocsContent>
         <TechDocsAddons>
-          <ExampleHeader />
-          <ExampleSubHeader />
-          <ExamplePrimarySidebar />
-          <ExampleSecondarySidebar />
-          <ExampleContent />
+          <GiveFeedbackAddon />
         </TechDocsAddons>
       </EntityTechdocsContent>
     </EntityLayout.Route>

packages/app/src/components/techdocs/ExampleAddons.tsx

@@ -1,108 +0,0 @@
-/*
- * Copyright 2022 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { useEffect } from 'react';
-
-import { Card, CardContent } from '@material-ui/core';
-
-import {
-  techdocsPlugin,
-  useShadowRootElements,
-} from '@backstage/plugin-techdocs';
-import {
-  createTechDocsAddon,
-  TechDocsAddonLocations,
-} from '@backstage/techdocs-addons';
-import { HeaderLabel } from '@backstage/core-components';
-
-/**
- * Note: this is not typically how or where one might define such things. It
- * would more typically be exported/provided by a plugin!
- *
- * In fact, this whole file and usage should be deleted before we merge things
- * in. This is just a convenient way to test the addon framework in a nice
- * end-to-end way before releasing anything.
- */
-
-export const ExampleHeader = techdocsPlugin.provide(
-  createTechDocsAddon({
-    name: 'ExampleHeader',
-    location: TechDocsAddonLocations.HEADER,
-    component: () => {
-      return <HeaderLabel label="Label" value="Value" />;
-    },
-  }),
-);
-
-export const ExampleSubHeader = techdocsPlugin.provide(
-  createTechDocsAddon({
-    name: 'ExampleSubHeader',
-    location: TechDocsAddonLocations.SUBHEADER,
-    component: () => {
-      return (
-        <Card>
-          <CardContent>Subheader.</CardContent>
-        </Card>
-      );
-    },
-  }),
-);
-
-export const ExamplePrimarySidebar = techdocsPlugin.provide(
-  createTechDocsAddon({
-    name: 'ExamplePrimarySidebar',
-    location: TechDocsAddonLocations.PRIMARY_SIDEBAR,
-    component: () => {
-      return (
-        <Card>
-          <CardContent>Primary Sidebar.</CardContent>
-        </Card>
-      );
-    },
-  }),
-);
-
-export const ExampleSecondarySidebar = techdocsPlugin.provide(
-  createTechDocsAddon({
-    name: 'ExampleSecondarySidebar',
-    location: TechDocsAddonLocations.SECONDARY_SIDEBAR,
-    component: () => {
-      return (
-        <Card>
-          <CardContent>Secondary Sidebar.</CardContent>
-        </Card>
-      );
-    },
-  }),
-);
-
-const ExampleContentComponent = () => {
-  const h1 = useShadowRootElements(['h1'])[0];
-  useEffect(() => {
-    if (h1 && !h1.innerText.startsWith('Modified: ')) {
-      h1.innerText = `Modified: ${h1.innerText}`;
-    }
-  }, [h1]);
-  return null;
-};
-
-export const ExampleContent = techdocsPlugin.provide(
-  createTechDocsAddon({
-    name: 'ExampleContent',
-    location: TechDocsAddonLocations.CONTENT,
-    component: ExampleContentComponent,
-  }),
-);

plugins/techdocs-backend/examples/documented-component/mkdocs.yml

@@ -1,4 +1,6 @@
 site_name: 'Example Documentation'
+repo_url: https://github.com/backstage/backstage
+edit_uri: edit/master/plugins/techdocs-backend/examples/documented-component/docs
 
 nav:
   - Home: index.md