Make Developer Guide sidebar button an external link

Author: GDYendell

backstage/packages/app/src/App.tsx

@@ -27,12 +27,10 @@ import {
 import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
 import { UserSettingsPage } from '@backstage/plugin-user-settings';
-import React from 'react';
 import { Route } from 'react-router-dom';
 import { apis } from './apis';
 import { Root } from './components/Root';
 import { entityPage } from './components/catalog/EntityPage';
-import { DeveloperGuidePage } from './components/dev-guide/GuideDocsPage';
 import { HomePage } from './components/home/HomePage';
 import { PortalDocsPage } from './components/portal-docs/PortalDocsPage';
 import { searchPage } from './components/search/SearchPage';
@@ -63,7 +61,6 @@ const routes = (
       <HomePage />
     </Route>
     <Route path="/catalog" element={<CatalogIndexPage />} />
-    <Route path="/guide" element={<DeveloperGuidePage />} />
     <Route path="/portal-docs" element={<PortalDocsPage />} />
     <Route
       path="/catalog/:namespace/:kind/:name"

backstage/packages/app/src/components/Root/Root.tsx

@@ -68,7 +68,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
         <SidebarItem icon={CategoryIcon} to="/catalog" text="Catalog" />
         <SidebarItem
           icon={LibraryBooksIcon}
-          to="/guide"
+          to="https://dev-guide.diamond.ac.uk"
           text="Developer Guide"
         />
         {/* End global nav */}

backstage/packages/app/src/components/dev-guide/GuideDocsPage.tsx

@@ -10,8 +10,6 @@ import {
   Typography,
 } from '@material-ui/core';
 import CategoryIcon from '@material-ui/icons/Category';
-import LibraryBooksIcon from '@material-ui/icons/LibraryBooks';
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 const SoftwareCatalogCard = () => {
@@ -45,37 +43,6 @@ const SoftwareCatalogCard = () => {
   );
 };
 
-const DeveloperGuideCard = () => {
-  const navigate = useNavigate();
-  const orgName =
-    useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage';
-
-  return (
-    <Card style={{ height: '100%' }}>
-      <CardActionArea onClick={() => navigate('/guide')}>
-        <CardContent>
-          <Typography variant="h5">
-            <LibraryBooksIcon /> Developer Guide
-          </Typography>
-          <Typography variant="body2">
-            Extensive documentation on developing software at {orgName}.
-            Including Tutorials, How-Tos, Explanations & References.
-          </Typography>
-        </CardContent>
-        <CardActions>
-          <Button
-            size="medium"
-            color="primary"
-            onClick={() => navigate('/guide')}
-          >
-            Visit
-          </Button>
-        </CardActions>
-      </CardActionArea>
-    </Card>
-  );
-};
-
 export const HomePage = () => {
   const orgName =
     useApi(configApiRef).getOptionalString('organization.name') ?? 'Backstage';
@@ -92,9 +59,6 @@ export const HomePage = () => {
           <Grid item xs={12} md={6} lg={4}>
             <SoftwareCatalogCard />
           </Grid>
-          <Grid item xs={12} md={6} lg={4}>
-            <DeveloperGuideCard />
-          </Grid>
         </Grid>
       </Content>
     </PageWithHeader>