refactor: remove usages of the Component interface (#7077)

The `Component` interface provides no typesafety to description
component classes. Its only purpose is to define the properties of the
Component decorator. Currently it only has optional properties, so it
matches the type `{}` which is as safe as `any`.

Author: JeanMeche

tensorboard/webapp/app_routing/route_config_types.ts

@@ -12,10 +12,10 @@ 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 {Component, Type} from '@angular/core';
+import {Type} from '@angular/core';
+import {Action} from '@ngrx/store';
 import {DeepLinkProvider} from './deep_link_provider';
 import {RouteKind, SerializableQueryParams} from './types';
-import {Action} from '@ngrx/store';
 
 export interface ConcreteRouteDef {
   routeKind: RouteKind;
@@ -26,7 +26,7 @@ export interface ConcreteRouteDef {
   // Parameter has to be denoted with ":" prefix and "/" has to precede it.
   path: string;
 
-  ngComponent: Type<Component>;
+  ngComponent: Type<unknown>;
 
   // Redirect to this `path` if current navigation does not match any known
   // routes. Only one RouteConfig can have defaultRoute = true.

tensorboard/webapp/app_routing/route_registry_module.ts

@@ -13,7 +13,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {
-  Component,
   Inject,
   ModuleWithProviders,
   NgModule,
@@ -28,10 +27,7 @@ import {RouteKind} from './types';
 @NgModule({})
 export class RouteRegistryModule {
   private readonly routeConfigs: RouteConfigs;
-  private readonly routeKindToNgComponent = new Map<
-    RouteKind,
-    Type<Component>
-  >();
+  private readonly routeKindToNgComponent = new Map<RouteKind, Type<unknown>>();
 
   constructor(
     @Optional() @Inject(ROUTE_CONFIGS_TOKEN) configsList: RouteDef[][]
@@ -67,7 +63,7 @@ export class RouteRegistryModule {
     return this.routeConfigs;
   }
 
-  getNgComponentByRouteKind(routeKind: RouteKind): Type<Component> | null {
+  getNgComponentByRouteKind(routeKind: RouteKind): Type<unknown> | null {
     return this.routeKindToNgComponent.get(routeKind) || null;
   }
 

tensorboard/webapp/app_routing/views/router_outlet_component.ts

@@ -33,14 +33,14 @@ export class RouterOutletComponent implements OnChanges {
   @ViewChild('routeContainer', {static: true, read: ViewContainerRef})
   private readonly routeContainer!: ViewContainerRef;
 
-  @Input() activeNgComponent!: Type<Component> | null;
+  @Input() activeNgComponent!: Type<unknown> | null;
 
   ngOnChanges(changes: SimpleChanges) {
     const activeComponentChange = changes['activeNgComponent'];
     if (activeComponentChange) {
       this.routeContainer.clear();
       const componentType =
-        activeComponentChange.currentValue as Type<Component> | null;
+        activeComponentChange.currentValue as Type<unknown> | null;
       if (componentType) {
         this.routeContainer.createComponent(componentType);
       }

tensorboard/webapp/customization/customizable_component.ts

@@ -31,7 +31,7 @@ import {
  *
  * 1. Define a customizable Component, for example a button:
  *
- *    const CustomizableButton = new InjectionToken<Type<Component>>('Customizable Button');
+ *    const CustomizableButton = new InjectionToken<Type<unknown>>('Customizable Button');
  *
  * 2. Where the customization point is desired, use this Component to wrap some
  *    default behavior. Bind to some possibly-empty variable with the
@@ -46,7 +46,7 @@ import {
  *
  *    constructor(
  *      @Optional() @Inject(CustomizableButton)
- *      readonly customButtonIfProvided: Type<Component>)
+ *      readonly customButtonIfProvided: Type<unknown>)
  *
  * If you do not wish to customize the behavior for a certain TensorBoard
  * service (in this case, a button), you're done. The TensorBoard service
@@ -85,7 +85,7 @@ import {
   `,
 })
 export class CustomizableComponent implements OnInit {
-  @Input() customizableComponent!: Type<Component> | undefined;
+  @Input() customizableComponent!: Type<unknown> | undefined;
 
   constructor(private readonly viewContainerRef: ViewContainerRef) {}
 

tensorboard/webapp/metrics/views/main_view/main_view_component.ts

@@ -17,18 +17,18 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  Input,
   Inject,
+  InjectionToken,
+  Input,
+  Optional,
   Output,
   Type,
-  Optional,
-  InjectionToken,
 } from '@angular/core';
 
 import {PluginType} from '../../types';
 import {CardObserver} from '../card_renderer/card_lazy_loader';
 
-export const SHARE_BUTTON_COMPONENT = new InjectionToken<Type<Component>>(
+export const SHARE_BUTTON_COMPONENT = new InjectionToken<Type<unknown>>(
   'Customizable Share Button'
 );
 
@@ -62,7 +62,7 @@ export class MainViewComponent {
     private readonly host: ElementRef,
     @Optional()
     @Inject(SHARE_BUTTON_COMPONENT)
-    readonly customShareButton: Type<Component>
+    readonly customShareButton: Type<unknown>
   ) {
     this.cardObserver = new CardObserver(
       this.host.nativeElement,

tensorboard/webapp/plugins/plugin_registry_module.ts

@@ -13,16 +13,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {
-  Component,
   Inject,
   ModuleWithProviders,
   NgModule,
   Optional,
   Type,
 } from '@angular/core';
-import {PluginConfig, PLUGIN_CONFIG_TOKEN} from './plugin_registry_types';
+import {PLUGIN_CONFIG_TOKEN, PluginConfig} from './plugin_registry_types';
 
-const pluginNameToComponent = new Map<string, Type<Component>>();
+const pluginNameToComponent = new Map<string, Type<unknown>>();
 
 @NgModule({})
 export class PluginRegistryModule {
@@ -40,7 +39,7 @@ export class PluginRegistryModule {
 
     for (const config of configs) {
       const {pluginName, componentClass} = config;
-      pluginNameToComponent.set(pluginName, componentClass as Type<Component>);
+      pluginNameToComponent.set(pluginName, componentClass as Type<unknown>);
     }
   }
 
@@ -71,7 +70,7 @@ export class PluginRegistryModule {
     };
   }
 
-  getComponent(pluginName: string): Type<Component> | null {
+  getComponent(pluginName: string): Type<unknown> | null {
     return pluginNameToComponent.get(pluginName) || null;
   }
 }

tensorboard/webapp/routes/index.ts

@@ -12,7 +12,7 @@ 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 {Component, Type} from '@angular/core';
+import {Type} from '@angular/core';
 import {RouteDef} from '../app_routing/route_config_types';
 import {RouteKind} from '../app_routing/types';
 import {TensorBoardWrapperComponent} from '../tb_wrapper/tb_wrapper_component';
@@ -23,7 +23,7 @@ export function routesFactory(): RouteDef[] {
     {
       routeKind: RouteKind.EXPERIMENT,
       path: '/',
-      ngComponent: TensorBoardWrapperComponent as Type<Component>,
+      ngComponent: TensorBoardWrapperComponent as Type<unknown>,
       defaultRoute: true,
       deepLinkProvider: new DashboardDeepLinkProvider(),
     },