Fix config to be secret

README.md

@@ -66,15 +66,14 @@ For more than 15 users you need to get a license from [Port](https://backstage-p
 
    - In Port, on the top right, click on the three dots and select **Credentials**
    - Generate API credentials (Client ID and Client Secret)
-   - Add these credentials to your Backstage's `app-config.yaml` under the `backend`:
+   - Add these credentials to your Backstage's `app-config.yaml`:
      ```yaml
-     backend:
-       port:
-         api:
-           baseUrl: https://api.getport.io/
-           auth:
-             clientId: YOUR_CLIENT_ID
-             clientSecret: YOUR_CLIENT_SECRET
+     port:
+       api:
+         baseUrl: https://api.getport.io/
+         auth:
+           clientId: YOUR_CLIENT_ID
+           clientSecret: YOUR_CLIENT_SECRET
      ```
    - [Find your Port credentials](https://docs.getport.io/build-your-software-catalog/custom-integration/api/#find-your-port-credentials)
 

backstage-plugins/packages/app/package.json

@@ -27,6 +27,7 @@
     "@backstage/plugin-catalog-graph": "^0.4.12",
     "@backstage/plugin-catalog-import": "^0.12.6",
     "@backstage/plugin-catalog-react": "^1.14.1",
+    "@backstage/plugin-devtools": "^0.1.22",
     "@backstage/plugin-kubernetes": "^0.12.0",
     "@backstage/plugin-org": "^0.6.32",
     "@backstage/plugin-permission-react": "^0.4.28",

backstage-plugins/packages/app/src/App.tsx

@@ -8,6 +8,7 @@ import {
   CatalogImportPage,
   catalogImportPlugin,
 } from '@backstage/plugin-catalog-import';
+import { DevToolsPage } from '@backstage/plugin-devtools';
 import { orgPlugin } from '@backstage/plugin-org';
 import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder';
 import { SearchPage } from '@backstage/plugin-search';
@@ -16,6 +17,7 @@ import {
   techdocsPlugin,
   TechDocsReaderPage,
 } from '@backstage/plugin-techdocs';
+
 import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
 import { UserSettingsPage } from '@backstage/plugin-user-settings';
@@ -116,6 +118,7 @@ const routes = (
     {/* Port Labs */}
     <Route path="/scorecards" element={<ScorecardsPage />} />
     <Route path="/dev-daily" element={<DevDailyPluginPage />} />
+    <Route path="/devtools" element={<DevToolsPage />} />
   </FlatRoutes>
 );
 

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

@@ -19,6 +19,7 @@ import {
 import { makeStyles } from '@material-ui/core';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import AssignmentTurnedInIcon from '@material-ui/icons/AssignmentTurnedIn';
+import BuildIcon from '@material-ui/icons/Build';
 import DoneAll from '@material-ui/icons/DoneAll';
 import ExtensionIcon from '@material-ui/icons/Extension';
 import HomeIcon from '@material-ui/icons/Home';
@@ -97,6 +98,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
         to="/settings"
       >
         <SidebarSettings />
+        <SidebarItem icon={BuildIcon} to="devtools" text="DevTools" />
       </SidebarGroup>
     </Sidebar>
     {children}

backstage-plugins/packages/backend/package.json

@@ -26,6 +26,7 @@
     "@backstage/plugin-catalog-backend": "^1.28.0",
     "@backstage/plugin-catalog-backend-module-logs": "^0.1.4",
     "@backstage/plugin-catalog-backend-module-scaffolder-entity-model": "^0.2.2",
+    "@backstage/plugin-devtools-backend": "^0.5.0",
     "@backstage/plugin-kubernetes-backend": "^0.19.0",
     "@backstage/plugin-permission-backend": "^0.5.51",
     "@backstage/plugin-permission-backend-module-allow-all-policy": "^0.2.2",

backstage-plugins/packages/backend/src/index.ts

@@ -50,6 +50,7 @@ backend.add(import('@backstage/plugin-search-backend-module-techdocs'));
 
 // kubernetes
 backend.add(import('@backstage/plugin-kubernetes-backend'));
+backend.add(import('@backstage/plugin-devtools-backend'));
 
 backend.add(import('@backstage/plugin-auth-backend-module-github-provider'));
 

backstage-plugins/plugins/backend-plugin/app-config.yaml

@@ -7,9 +7,9 @@ backend:
   listen:
     port: 7007
 
-  port:
-    api:
-      baseUrl: https://api.getport.io/
-      auth:
-        clientId:
-        clientSecret:
+port:
+  api:
+    baseUrl: https://api.getport.io/
+    auth:
+      clientId:
+      clientSecret:

backstage-plugins/plugins/backend-plugin/config.d.ts

@@ -1,12 +1,13 @@
 export interface Config {
-  backend: {
-    port: {
-      api: {
-        baseUrl: string;
-        auth: {
-          clientId: string;
-          clientSecret: string;
-        };
+  port: {
+    api: {
+      baseUrl: string;
+      /**
+       * @deepVisibility secret
+       */
+      auth: {
+        clientId: string;
+        clientSecret: string;
       };
     };
   };

backstage-plugins/plugins/backend-plugin/src/service/router.ts

@@ -83,7 +83,7 @@ export async function createRouter(
   options: RouterOptions,
 ): Promise<express.Handler> {
   const { logger, config } = options;
-  const portConfig = config.getConfig('backend.port');
+  const portConfig = config.getConfig('port');
   const baseUrl = portConfig.getString('api.baseUrl');
   const clientId = portConfig.getString('api.auth.clientId');
   const clientSecret = portConfig.getString('api.auth.clientSecret');