Merge pull request #17393 from awanlin/topic/re-introduce-devtools-plugin

Allow me to RE-introduce the DevTools plugin! 🧰

packages/app/src/App.tsx

@@ -109,6 +109,8 @@ import { TwoColumnLayout } from './components/scaffolder/customScaffolderLayouts
 import { ScoreBoardPage } from '@oriflame/backstage-plugin-score-card';
 import { StackstormPage } from '@backstage/plugin-stackstorm';
 import { PuppetDbPage } from '@backstage/plugin-puppetdb';
+import { DevToolsPage } from '@backstage/plugin-devtools';
+import { customDevToolsPage } from './components/devtools/CustomDevToolsPage';
 
 const app = createApp({
   apis,
@@ -291,6 +293,9 @@ const routes = (
     <Route path="/score-board" element={<ScoreBoardPage />} />
     <Route path="/stackstorm" element={<StackstormPage />} />
     <Route path="/puppetdb" element={<PuppetDbPage />} />
+    <Route path="/devtools" element={<DevToolsPage />}>
+      {customDevToolsPage}
+    </Route>
   </FlatRoutes>
 );
 

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

@@ -52,6 +52,7 @@ import { MyGroupsSidebarItem } from '@backstage/plugin-org';
 import { SearchModal } from '../search/SearchModal';
 import Score from '@material-ui/icons/Score';
 import { useApp } from '@backstage/core-plugin-api';
+import BuildIcon from '@material-ui/icons/Build';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -176,6 +177,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
         to="/settings"
       >
         <SidebarSettings />
+        <SidebarItem icon={BuildIcon} to="devtools" text="DevTools" />
       </SidebarGroup>
     </Sidebar>
     {children}

packages/app/src/components/devtools/CustomDevToolsPage.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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 {
+  ConfigContent,
+  ExternalDependenciesContent,
+  InfoContent,
+} from '@backstage/plugin-devtools';
+import { DevToolsLayout } from '@backstage/plugin-devtools';
+import React from 'react';
+
+const DevToolsPage = () => {
+  return (
+    <DevToolsLayout>
+      <DevToolsLayout.Route path="info" title="Info">
+        <InfoContent />
+      </DevToolsLayout.Route>
+      <DevToolsLayout.Route path="config" title="Config">
+        <ConfigContent />
+      </DevToolsLayout.Route>
+      <DevToolsLayout.Route
+        path="external-dependencies"
+        title="External Dependencies"
+      >
+        <ExternalDependenciesContent />
+      </DevToolsLayout.Route>
+    </DevToolsLayout>
+  );
+};
+
+export const customDevToolsPage = <DevToolsPage />;