diff --git a/app-config.yaml b/app-config.yaml index afabec2..16a83af 100644 --- a/app-config.yaml +++ b/app-config.yaml @@ -1,54 +1,63 @@ app: - title: B.C. government DevHub - baseUrl: http://localhost:3000 - support: - url: 'https://github.com/bcgov/developer-portal/issues' - items: - - title: 'Something went wrong.' - links: - - url: 'https://github.com/bcgov/developer-portal/issues' - title: 'Our GitHub issues.' - analytics: - snowplow: - enabled: true - collectorUrl: https://spm.apps.gov.bc.ca + title: B.C. government DevHub + baseUrl: http://localhost:3000 + support: + url: 'https://github.com/bcgov/developer-portal/issues' + items: + - title: 'Something went wrong.' + links: + - url: 'https://github.com/bcgov/developer-portal/issues' + title: 'Our GitHub issues.' + analytics: + snowplow: + enabled: true + collectorUrl: https://spm.apps.gov.bc.ca organization: - name: BCDevExchange + name: BCDevExchange backend: - # Used for enabling authentication, secret is shared by all backend plugins - # See https://backstage.io/docs/tutorials/backend-to-backend-auth for - # information on the format - # auth: - # keys: - # - secret: ${BACKEND_SECRET} - baseUrl: http://localhost:7007 - listen: - port: 7007 - # Uncomment the following host directive to bind to specific interfaces - # host: 127.0.0.1 - csp: - connect-src: [ "'self'", 'http:', 'https:' ] - img-src: [ "'self'", "*.gov.bc.ca", "github.com", "bcgov.github.io", "img.shields.io", "data:" ] - frame-src: ["www.youtube.com", "miro.com"] - # Content-Security-Policy directives follow the Helmet format: https://helmetjs.github.io/#reference - # Default Helmet Content-Security-Policy values can be removed by setting the key to false - cors: - origin: http://localhost:3000 - methods: [ GET, HEAD, PATCH, POST, PUT, DELETE ] - credentials: true - # This is for local development only, it is not recommended to use this in production - # The production database configuration is set via the helm settings yaml file. - database: - client: better-sqlite3 - connection: ':memory:' - cache: - store: memory - # workingDirectory: /tmp # Use this to configure a working directory for the scaffolder, defaults to the OS temp-dir + # Used for enabling authentication, secret is shared by all backend plugins + # See https://backstage.io/docs/tutorials/backend-to-backend-auth for + # information on the format + # auth: + # keys: + # - secret: ${BACKEND_SECRET} + baseUrl: http://localhost:7007 + listen: + port: 7007 + # Uncomment the following host directive to bind to specific interfaces + # host: 127.0.0.1 + csp: + connect-src: ["'self'", 'http:', 'https:'] + img-src: + [ + "'self'", + '*.gov.bc.ca', + 'github.com', + 'bcgov.github.io', + 'img.shields.io', + 'cdnjs.cloudflare.com/ajax/libs/emojione/', + 'data:', + ] + frame-src: ['www.youtube.com', 'miro.com'] + # Content-Security-Policy directives follow the Helmet format: https://helmetjs.github.io/#reference + # Default Helmet Content-Security-Policy values can be removed by setting the key to false + cors: + origin: http://localhost:3000 + methods: [GET, HEAD, PATCH, POST, PUT, DELETE] + credentials: true + # This is for local development only, it is not recommended to use this in production + # The production database configuration is set via the helm settings yaml file. + database: + client: better-sqlite3 + connection: ':memory:' + cache: + store: memory + # workingDirectory: /tmp # Use this to configure a working directory for the scaffolder, defaults to the OS temp-dir permission: - enabled: true + enabled: true integrations: # github: @@ -65,32 +74,31 @@ integrations: # apiKey: ${STACK_OVERFLOW_API_KEY} proxy: -### Example for how to add a proxy endpoint for the frontend. -### A typical reason to do this is to handle HTTPS and CORS for internal services. -# '/test': -# target: 'https://example.com' -# changeOrigin: true + ### Example for how to add a proxy endpoint for the frontend. + ### A typical reason to do this is to handle HTTPS and CORS for internal services. + # '/test': + # target: 'https://example.com' + # changeOrigin: true endpoints: '/github-api': - target: https://api.github.com + target: https://api.github.com allowedHeaders: ['Authorization', 'X-GitHub-Api-Version', 'Accept'] credentials: require headers: - X-GitHub-Api-Version: "2022-11-28" + X-GitHub-Api-Version: '2022-11-28' Accept: application/vnd.github+json - # Reference documentation http://backstage.io/docs/features/techdocs/configuration # Note: After experimenting with basic setup, use CI/CD to generate docs # and an external cloud storage when deploying TechDocs for production use-case. # https://backstage.io/docs/features/techdocs/how-to-guides#how-to-migrate-from-techdocs-basic-to-recommended-deployment-approach techdocs: - builder: 'local' # Alternatives - 'external' - generator: - runIn: 'docker' # Alternatives - 'local' - publisher: - type: 'local' # Alternatives - 'googleGcs' or 'awsS3'. Read documentation for using alternatives. - sanitizer: - allowedIframeHosts: - - www.youtube.com - - miro.com + builder: 'local' # Alternatives - 'external' + generator: + runIn: 'docker' # Alternatives - 'local' + publisher: + type: 'local' # Alternatives - 'googleGcs' or 'awsS3'. Read documentation for using alternatives. + sanitizer: + allowedIframeHosts: + - www.youtube.com + - miro.com diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index a6479d1..342856c 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -1,178 +1,200 @@ import React from 'react'; -import {Navigate, Route} from 'react-router-dom'; -import {ApiExplorerPage} from '@backstage/plugin-api-docs'; +import { Navigate, Route } from 'react-router-dom'; +import { ApiExplorerPage } from '@backstage/plugin-api-docs'; import { - CatalogEntityPage, - CatalogIndexPage, - catalogPlugin, + CatalogEntityPage, + CatalogIndexPage, + catalogPlugin, } from '@backstage/plugin-catalog'; +import { CatalogImportPage } from '@backstage/plugin-catalog-import'; +import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder'; +import { orgPlugin } from '@backstage/plugin-org'; +import { SearchPage } from '@backstage/plugin-search'; +import { TechRadarPage } from '@backstage-community/plugin-tech-radar'; import { - CatalogImportPage, - -} from '@backstage/plugin-catalog-import'; -import {ScaffolderPage, scaffolderPlugin} from '@backstage/plugin-scaffolder'; -import {orgPlugin} from '@backstage/plugin-org'; -import {SearchPage} from '@backstage/plugin-search'; -import {TechRadarPage} from '@backstage-community/plugin-tech-radar'; -import { - TechDocsIndexPage, - techdocsPlugin, - TechDocsReaderPage, + TechDocsIndexPage, + techdocsPlugin, + TechDocsReaderPage, } from '@backstage/plugin-techdocs'; -import {TechDocsAddons} from '@backstage/plugin-techdocs-react'; -import { /*ExpandableNavigation*/ ReportIssue} from '@backstage/plugin-techdocs-module-addons-contrib'; -import {UserSettingsPage} from '@backstage/plugin-user-settings'; -import {apis} from './apis'; -import {entityPage} from './components/catalog/EntityPage'; -import {searchPage} from './components/search/SearchPage'; -import {Root} from './components/Root'; +import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; +import { + /* ExpandableNavigation*/ ReportIssue, +} from '@backstage/plugin-techdocs-module-addons-contrib'; +import { UserSettingsPage } from '@backstage/plugin-user-settings'; +import { apis } from './apis'; +import { entityPage } from './components/catalog/EntityPage'; +import { searchPage } from './components/search/SearchPage'; +import { Root } from './components/Root'; -import {AlertDisplay, OAuthRequestDialog} from '@backstage/core-components'; -import {createApp} from '@backstage/app-defaults'; -import {AppRouter, FlatRoutes} from '@backstage/core-app-api'; -import {CatalogGraphPage} from '@backstage/plugin-catalog-graph'; -import {RequirePermission} from '@backstage/plugin-permission-react'; -import {catalogEntityCreatePermission} from '@backstage/plugin-catalog-common/alpha'; +import { AlertDisplay, OAuthRequestDialog } from '@backstage/core-components'; +import { createApp } from '@backstage/app-defaults'; +import { AppRouter, FlatRoutes } from '@backstage/core-app-api'; +import { CatalogGraphPage } from '@backstage/plugin-catalog-graph'; +import { RequirePermission } from '@backstage/plugin-permission-react'; +import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha'; -import {CssBaseline, ThemeProvider} from '@material-ui/core'; -import {darkTheme, lightTheme} from '@backstage/theme'; -import {devExTheme} from './devex-theme'; +import { CssBaseline, ThemeProvider } from '@material-ui/core'; +import { darkTheme, lightTheme } from '@backstage/theme'; +import { devExTheme } from './devex-theme'; -import {HomepageCompositionRoot} from '@backstage/plugin-home'; +import { HomepageCompositionRoot } from '@backstage/plugin-home'; import HomePage from './components/home/HomePage'; import { TocFix } from '@app/plugin-toc-fix2'; import { TechdocExpandableToc } from '@app/plugin-expandable-toc'; -import {Mermaid} from "backstage-plugin-techdocs-addon-mermaid"; +import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid'; import { Custom404Page } from './components/404/Custom404Page'; const app = createApp({ - apis, - bindRoutes({bind}) { - bind(catalogPlugin.externalRoutes, { - createComponent: scaffolderPlugin.routes.root, - viewTechDoc: techdocsPlugin.routes.docRoot, - createFromTemplate: scaffolderPlugin.routes.selectedTemplate, - }); + apis, + bindRoutes({ bind }) { + bind(catalogPlugin.externalRoutes, { + createComponent: scaffolderPlugin.routes.root, + viewTechDoc: techdocsPlugin.routes.docRoot, + createFromTemplate: scaffolderPlugin.routes.selectedTemplate, + }); - bind(scaffolderPlugin.externalRoutes, { - viewTechDoc: techdocsPlugin.routes.docRoot, - }); + bind(scaffolderPlugin.externalRoutes, { + viewTechDoc: techdocsPlugin.routes.docRoot, + }); - bind(orgPlugin.externalRoutes, { - catalogIndex: catalogPlugin.routes.catalogIndex, - }); - }, - themes: [ - { - id: 'devex', - title: 'DevEx Theme', - variant: 'light', - Provider: ({children}) => ( - - {children} - - ), - }, - { - id: 'light', - title: 'Light Theme', - variant: 'light', - Provider: ({children}) => ( - - {children} - - ), - }, - { - id: 'dark', - title: 'Dark Theme', - variant: 'dark', - Provider: ({children}) => ( - - {children} - - ), - }, - ], - components: { NotFoundErrorPage: () => ( - - )}, + bind(orgPlugin.externalRoutes, { + catalogIndex: catalogPlugin.routes.catalogIndex, + }); + }, + themes: [ + { + id: 'devex', + title: 'DevEx Theme', + variant: 'light', + Provider: ({ children }) => ( + + {children} + + ), + }, + { + id: 'light', + title: 'Light Theme', + variant: 'light', + Provider: ({ children }) => ( + + {children} + + ), + }, + { + id: 'dark', + title: 'Dark Theme', + variant: 'dark', + Provider: ({ children }) => ( + + {children} + + ), + }, + ], + components: { NotFoundErrorPage: () => }, }); const ExternalRedirect = ({ to }: { to: string }) => { - window.location.href = to; + window.location.href = to; - return null; + return null; }; const routes = ( - - }> - - - }/> - }/> - } - > - {entityPage} - - }/> - {/* redirect in case anyone has bookmarked bcdg*/} - }/> + + }> + + + } /> + } /> + } + > + {entityPage} + + } /> + {/* redirect in case anyone has bookmarked bcdg*/} + } + /> - } - > - - - - {/* */} - - - - - } - /> - }/> - } - /> - - - - } - /> - }> - {searchPage} - - }/> - }/> + } + > + + + + {/* */} + + + + + + } + /> + } /> + } + /> + + + + } + /> + }> + {searchPage} + + } /> + } /> - {/* redirect several popular "classic" devhub urls */} - }/> - }/> - }/> - + {/* redirect several popular "classic" devhub urls */} + + } + /> + + } + /> + + } + /> + ); export default app.createRoot( - <> - - - - {routes} - - , + <> + + + + {routes} + + , );