Review remarks implemented

Signed-off-by: Tomasz Szuba <tszuba@box.com>

plugins/tech-radar/api-report.md

@@ -41,6 +41,11 @@ export interface RadarEntrySnapshot {
   ringId: string;
 }
 
+// Warning: (ae-missing-release-tag) "RadarPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public
+export function RadarPage(props: TechRadarPageProps): JSX.Element;
+
 // Warning: (ae-missing-release-tag) "RadarQuadrant" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
@@ -58,10 +63,10 @@ export interface RadarRing {
   name: string;
 }
 
-// Warning: (ae-missing-release-tag) "RadarPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+// Warning: (ae-missing-release-tag) "Router" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
-// @public
-export function Router(props: TechRadarPageProps): JSX.Element;
+// @public @deprecated (undocumented)
+export const Router: typeof RadarPage;
 
 // Warning: (ae-missing-release-tag) "TechRadarApi" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -103,16 +108,16 @@ export interface TechRadarLoaderResponse {
 // Warning: (ae-missing-release-tag) "TechRadarPage" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export const TechRadarPage: Router;
+export const TechRadarPage: RadarPage;
 
 // Warning: (ae-missing-release-tag) "TechRadarPageProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export type TechRadarPageProps = TechRadarComponentProps & {
-  title?: string;
-  subtitle?: string;
+export interface TechRadarPageProps extends TechRadarComponentProps {
   pageTitle?: string;
-};
+  subtitle?: string;
+  title?: string;
+}
 
 // Warning: (ae-missing-release-tag) "techRadarPlugin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //

plugins/tech-radar/src/api.ts

@@ -184,51 +184,3 @@ export interface TechRadarLoaderResponse {
 /*
  * Set up the Radar as a Backstage component.
  */
-
-/**
- * Properties of {@link TechRadarComponent}
- */
-export interface TechRadarComponentProps {
-  /**
-   * ID of this Tech Radar
-   *
-   * @remarks
-   *
-   * Used when there are multiple Tech Radars and passed to {@link TechRadarApi.load}
-   */
-  id?: string;
-  /**
-   * Width of Tech Radar
-   */
-  width: number;
-  /**
-   * Height of Tech Radar
-   */
-  height: number;
-  /**
-   * Custom React props to the `<svg>` element created for Tech Radar
-   */
-  svgProps?: object;
-  /**
-   * Text to filter {@link RadarEntry} inside Tech Radar
-   */
-  searchText?: string;
-}
-
-/**
- * Properties for {@link TechRadarPage}
- */
-export type TechRadarPageProps = TechRadarComponentProps & {
-  /**
-   * Title
-   */
-  title?: string;
-  /**
-   * Subtitle
-   */
-  subtitle?: string;
-  /**
-   * Page Title
-   */
-  pageTitle?: string;
-};

plugins/tech-radar/src/components/RadarComponent.test.tsx

@@ -22,7 +22,7 @@ import { act } from 'react-dom/test-utils';
 import { withLogCollector } from '@backstage/test-utils';
 
 import GetBBoxPolyfill from '../utils/polyfills/getBBox';
-import RadarComponent from './RadarComponent';
+import { RadarComponent } from './RadarComponent';
 import { TechRadarLoaderResponse, techRadarApiRef, TechRadarApi } from '../api';
 
 import { ApiRegistry, ApiProvider } from '@backstage/core-app-api';

plugins/tech-radar/src/components/RadarComponent.tsx

@@ -18,12 +18,7 @@ import { Progress } from '@backstage/core-components';
 import { errorApiRef, useApi } from '@backstage/core-plugin-api';
 import React, { useEffect } from 'react';
 import { useAsync } from 'react-use';
-import {
-  RadarEntry,
-  techRadarApiRef,
-  TechRadarComponentProps,
-  TechRadarLoaderResponse,
-} from '../api';
+import { RadarEntry, techRadarApiRef, TechRadarLoaderResponse } from '../api';
 import Radar from '../components/Radar';
 import { Entry } from '../utils/types';
 
@@ -64,6 +59,36 @@ function matchFilter(filter?: string): (entry: RadarEntry) => boolean {
   };
 }
 
+/**
+ * Properties of {@link TechRadarComponent}
+ */
+export interface TechRadarComponentProps {
+  /**
+   * ID of this Tech Radar
+   *
+   * @remarks
+   *
+   * Used when there are multiple Tech Radars and passed to {@link TechRadarApi.load}
+   */
+  id?: string;
+  /**
+   * Width of Tech Radar
+   */
+  width: number;
+  /**
+   * Height of Tech Radar
+   */
+  height: number;
+  /**
+   * Custom React props to the `<svg>` element created for Tech Radar
+   */
+  svgProps?: object;
+  /**
+   * Text to filter {@link RadarEntry} inside Tech Radar
+   */
+  searchText?: string;
+}
+
 /**
  * Main React component of Tech Radar
  *
@@ -71,7 +96,7 @@ function matchFilter(filter?: string): (entry: RadarEntry) => boolean {
  *
  * For advanced use cases. Typically, you want to use {@link TechRadarPage}
  */
-function RadarComponent(props: TechRadarComponentProps) {
+export function RadarComponent(props: TechRadarComponentProps) {
   const { loading, error, value: data } = useTechRadarLoader(props.id);
 
   const mapToEntries = (
@@ -114,5 +139,3 @@ function RadarComponent(props: TechRadarComponentProps) {
     </>
   );
 }
-
-export default RadarComponent;

plugins/tech-radar/src/components/RadarPage.tsx

@@ -23,8 +23,7 @@ import {
 } from '@backstage/core-components';
 import { Grid, Input, makeStyles } from '@material-ui/core';
 import React from 'react';
-import { TechRadarPageProps } from '../api';
-import RadarComponent from '../components/RadarComponent';
+import { RadarComponent, TechRadarComponentProps } from './RadarComponent';
 
 const useStyles = makeStyles(() => ({
   overflowXScroll: {
@@ -32,6 +31,24 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
+/**
+ * Properties for {@link TechRadarPage}
+ */
+export interface TechRadarPageProps extends TechRadarComponentProps {
+  /**
+   * Title
+   */
+  title?: string;
+  /**
+   * Subtitle
+   */
+  subtitle?: string;
+  /**
+   * Page Title
+   */
+  pageTitle?: string;
+}
+
 /**
  * Main Page of Tech Radar
  */

plugins/tech-radar/src/components/index.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2021 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.
+ */
+export { RadarComponent as TechRadarComponent } from './RadarComponent';
+export type { TechRadarComponentProps } from './RadarComponent';
+export * from './RadarPage';
+/*
+ * Copyright 2021 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.
+ */

plugins/tech-radar/src/index.ts

@@ -20,23 +20,22 @@
  * @packageDocumentation
  */
 
+import { RadarPage } from './components';
+
 export {
   techRadarPlugin,
   techRadarPlugin as plugin,
   TechRadarPage,
 } from './plugin';
 
+export * from './components';
+
 /**
  * @deprecated Use plugin extensions instead
  */
-export { RadarPage as Router } from './components/RadarPage';
+export const Router = RadarPage;
 
 /**
  * The TypeScript API for configuring Tech Radar.
  */
 export * from './api';
-
-/**
- * The React component for more advanced use cases.
- */
-export { default as TechRadarComponent } from './components/RadarComponent';