Code Review: Add depreacted.ts and remove the old duplicated code

Signed-off-by: kmarkow <kamilmarkow@gmail.com>

plugins/home/api-report.md

@@ -6,42 +6,38 @@
 /// <reference types="react" />
 
 import { BackstagePlugin } from '@backstage/core-plugin-api';
-import { Extension } from '@backstage/core-plugin-api';
+import { CardConfig as CardConfig_2 } from '@backstage/plugin-home-react';
+import { CardExtensionProps as CardExtensionProps_2 } from '@backstage/plugin-home-react';
+import { CardLayout as CardLayout_2 } from '@backstage/plugin-home-react';
+import { CardSettings as CardSettings_2 } from '@backstage/plugin-home-react';
+import { ComponentParts as ComponentParts_2 } from '@backstage/plugin-home-react';
+import { ComponentRenderer as ComponentRenderer_2 } from '@backstage/plugin-home-react';
+import { createCardExtension as createCardExtension_2 } from '@backstage/plugin-home-react';
 import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
-import { RJSFSchema } from '@rjsf/utils';
+import { RendererProps as RendererProps_2 } from '@backstage/plugin-home-react';
 import { RouteRef } from '@backstage/core-plugin-api';
 
-// @public (undocumented)
-export type CardConfig = {
-  layout?: CardLayout;
-  settings?: CardSettings;
-};
-
+// Warning: (tsdoc-at-sign-in-word) The "@" character looks like part of a TSDoc tag; use a backslash to escape it
+//
 // @public @deprecated (undocumented)
-export type CardExtensionProps<T> = ComponentRenderer & {
-  title?: string;
-} & T;
+export type CardConfig = CardConfig_2;
 
+// Warning: (tsdoc-at-sign-in-word) The "@" character looks like part of a TSDoc tag; use a backslash to escape it
+//
 // @public @deprecated (undocumented)
-export type CardLayout = {
-  width?: {
-    minColumns?: number;
-    maxColumns?: number;
-    defaultColumns?: number;
-  };
-  height?: {
-    minRows?: number;
-    maxRows?: number;
-    defaultRows?: number;
-  };
-};
+export type CardExtensionProps<T> = CardExtensionProps_2<T>;
 
-// @public (undocumented)
-export type CardSettings = {
-  schema?: RJSFSchema;
-};
+// Warning: (tsdoc-at-sign-in-word) The "@" character looks like part of a TSDoc tag; use a backslash to escape it
+//
+// @public @deprecated (undocumented)
+export type CardLayout = CardLayout_2;
+
+// Warning: (tsdoc-at-sign-in-word) The "@" character looks like part of a TSDoc tag; use a backslash to escape it
+//
+// @public @deprecated (undocumented)
+export type CardSettings = CardSettings_2;
 
 // @public (undocumented)
 export type ClockConfig = {
@@ -59,18 +55,15 @@ export const ComponentAccordion: (props: {
   ContextProvider?: ((props: any) => JSX.Element) | undefined;
 }) => JSX.Element;
 
+// Warning: (tsdoc-at-sign-in-word) The "@" character looks like part of a TSDoc tag; use a backslash to escape it
+//
 // @public @deprecated (undocumented)
-export type ComponentParts = {
-  Content: (props?: any) => JSX.Element;
-  Actions?: () => JSX.Element;
-  Settings?: () => JSX.Element;
-  ContextProvider?: (props: any) => JSX.Element;
-};
+export type ComponentParts = ComponentParts_2;
 
+// Warning: (tsdoc-at-sign-in-word) The "@" character looks like part of a TSDoc tag; use a backslash to escape it
+//
 // @public @deprecated (undocumented)
-export type ComponentRenderer = {
-  Renderer?: (props: RendererProps) => JSX.Element;
-};
+export type ComponentRenderer = ComponentRenderer_2;
 
 // @public (undocumented)
 export const ComponentTab: (props: {
@@ -88,15 +81,10 @@ export const ComponentTabs: (props: {
   }[];
 }) => JSX.Element;
 
-// @public @deprecated
-export function createCardExtension<T>(options: {
-  title: string;
-  components: () => Promise<ComponentParts>;
-  name?: string;
-  description?: string;
-  layout?: CardLayout;
-  settings?: CardSettings;
-}): Extension<(props: CardExtensionProps<T>) => JSX.Element>;
+// Warning: (tsdoc-at-sign-in-word) The "@" character looks like part of a TSDoc tag; use a backslash to escape it
+//
+// @public @deprecated (undocumented)
+export const createCardExtension: typeof createCardExtension_2;
 
 // @public
 export const CustomHomepageGrid: (
@@ -130,19 +118,19 @@ export const HomepageCompositionRoot: (props: {
 
 // @public (undocumented)
 export const HomePageRandomJoke: (
-  props: CardExtensionProps<{
+  props: CardExtensionProps_2<{
     defaultCategory?: 'any' | 'programming' | undefined;
   }>,
 ) => JSX.Element;
 
 // @public
 export const HomePageStarredEntities: (
-  props: CardExtensionProps<unknown>,
+  props: CardExtensionProps_2<unknown>,
 ) => JSX.Element;
 
 // @public
 export const HomePageToolkit: (
-  props: CardExtensionProps<ToolkitContentProps>,
+  props: CardExtensionProps_2<ToolkitContentProps>,
 ) => JSX.Element;
 
 // @public (undocumented)
@@ -163,12 +151,14 @@ export type LayoutConfiguration = {
   height: number;
 };
 
+// Warning: (tsdoc-at-sign-in-word) The "@" character looks like part of a TSDoc tag; use a backslash to escape it
+//
 // @public @deprecated (undocumented)
-export type RendererProps = {
-  title: string;
-} & ComponentParts;
+export type RendererProps = RendererProps_2;
 
-// @public (undocumented)
+// Warning: (tsdoc-at-sign-in-word) The "@" character looks like part of a TSDoc tag; use a backslash to escape it
+//
+// @public @deprecated (undocumented)
 export const SettingsModal: (props: {
   open: boolean;
   close: Function;

plugins/home/package.json

@@ -38,6 +38,7 @@
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/plugin-catalog-react": "workspace:^",
+    "@backstage/plugin-home-react": "workspace:^",
     "@backstage/theme": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",

plugins/home/src/componentRenderers/ComponentAccordion.tsx

@@ -15,6 +15,7 @@
  */
 
 import React from 'react';
+import { SettingsModal } from '@backstage/plugin-home-react';
 import {
   Accordion,
   AccordionDetails,
@@ -27,8 +28,6 @@ import { makeStyles } from '@material-ui/core/styles';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import SettingsIcon from '@material-ui/icons/Settings';
 
-import { SettingsModal } from '../components';
-
 const useStyles = makeStyles((theme: Theme) => ({
   settingsIconButton: {
     padding: theme.spacing(0, 1, 0, 0),

plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx

@@ -42,7 +42,7 @@ import {
   LayoutConfigurationSchema,
   WidgetSchema,
 } from './types';
-import { CardConfig } from '../../extensions';
+import { CardConfig } from '@backstage/plugin-home-react';
 
 // eslint-disable-next-line new-cap
 const ResponsiveGrid = WidthProvider(Responsive);

plugins/home/src/components/index.ts

@@ -15,5 +15,4 @@
  */
 
 export { HomepageCompositionRoot } from './HomepageCompositionRoot';
-export { SettingsModal } from './SettingsModal';
 export * from './CustomHomepage';

plugins/home/src/deprecated.ts

@@ -14,8 +14,60 @@
  * limitations under the License.
  */
 
-// import { createCardExtension } from './extensions';
+import {
+  createCardExtension as homeReactCreateCardExtension,
+  CardConfig as homeReactCardConfig,
+  CardExtensionProps as homeReactCardExtensionProps,
+  CardLayout as homeReactCardLayout,
+  CardSettings as homeReactCardSettings,
+  ComponentParts as homeReactComponentParts,
+  ComponentRenderer as homeReactComponentRenderer,
+  RendererProps as homeReactRendererProps,
+  SettingsModal as homeReactSettingsModal,
+} from '@backstage/plugin-home-react';
 
-// export { createCardExtension };
-
-export * from './extensions';
+/**
+ * @public
+ * @deprecated Import from '@backstage/plugin-home-react' instead
+ */
+export const createCardExtension = homeReactCreateCardExtension;
+/**
+ * @public
+ * @deprecated Import from '@backstage/plugin-home-react' instead
+ */
+export type CardExtensionProps<T> = homeReactCardExtensionProps<T>;
+/**
+ * @public
+ * @deprecated Import from '@backstage/plugin-home-react' instead
+ */
+export type CardLayout = homeReactCardLayout;
+/**
+ * @public
+ * @deprecated Import from '@backstage/plugin-home-react' instead
+ */
+export type CardSettings = homeReactCardSettings;
+/**
+ * @public
+ * @deprecated Import from '@backstage/plugin-home-react' instead
+ */
+export type CardConfig = homeReactCardConfig;
+/**
+ * @public
+ * @deprecated Import from '@backstage/plugin-home-react' instead
+ */
+export type ComponentParts = homeReactComponentParts;
+/**
+ * @public
+ * @deprecated Import from '@backstage/plugin-home-react' instead
+ */
+export type ComponentRenderer = homeReactComponentRenderer;
+/**
+ * @public
+ * @deprecated Import from '@backstage/plugin-home-react' instead
+ */
+export type RendererProps = homeReactRendererProps;
+/**
+ * @public
+ * @deprecated Import from '@backstage/plugin-home-react' instead
+ */
+export const SettingsModal = homeReactSettingsModal;

plugins/home/src/extensions.tsx

@@ -1,200 +0,0 @@
-/*
- * 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.
- */
-
-import React, { Suspense } from 'react';
-import { IconButton } from '@material-ui/core';
-import SettingsIcon from '@material-ui/icons/Settings';
-import { InfoCard } from '@backstage/core-components';
-import { SettingsModal } from './components';
-import { createReactExtension, useApp } from '@backstage/core-plugin-api';
-import { RJSFSchema } from '@rjsf/utils';
-
-/**
- * @public
- * @deprecated Please use the same type from `@backstage/plugin-home-react` instead
- */
-export type ComponentRenderer = {
-  Renderer?: (props: RendererProps) => JSX.Element;
-};
-
-/**
- * @public
- * @deprecated Please use the same type from `@backstage/plugin-home-react` instead
- */
-export type ComponentParts = {
-  Content: (props?: any) => JSX.Element;
-  Actions?: () => JSX.Element;
-  Settings?: () => JSX.Element;
-  ContextProvider?: (props: any) => JSX.Element;
-};
-
-/**
- * @public
- * @deprecated Please use the same type from `@backstage/plugin-home-react` instead
- */
-export type RendererProps = { title: string } & ComponentParts;
-
-/**
- * @public
- * @deprecated Please use the same type from `@backstage/plugin-home-react` instead
- */
-export type CardExtensionProps<T> = ComponentRenderer & { title?: string } & T;
-
-/**
- * @public
- * @deprecated Please use the same type from `@backstage/plugin-home-react` instead
- */
-export type CardLayout = {
-  width?: { minColumns?: number; maxColumns?: number; defaultColumns?: number };
-  height?: { minRows?: number; maxRows?: number; defaultRows?: number };
-};
-
-/**
- * @public
- */
-export type CardSettings = {
-  schema?: RJSFSchema;
-};
-
-/**
- * @public
- */
-export type CardConfig = {
-  layout?: CardLayout;
-  settings?: CardSettings;
-};
-
-/**
- * An extension creator to create card based components for the homepage
- *
- * @public
- * @deprecated Please use the same type from `@backstage/plugin-home-react` instead
- */
-export function createCardExtension<T>(options: {
-  title: string;
-  components: () => Promise<ComponentParts>;
-  name?: string;
-  description?: string;
-  layout?: CardLayout;
-  settings?: CardSettings;
-}) {
-  const { title, components, name, description, layout, settings } = options;
-  // If widget settings schema is defined, we don't want to show the Settings icon or dialog
-  const isCustomizable = settings?.schema !== undefined;
-
-  return createReactExtension({
-    name,
-    data: { title, description, 'home.widget.config': { layout, settings } },
-    component: {
-      lazy: () =>
-        components().then(componentParts => {
-          return (props: CardExtensionProps<T>) => {
-            return (
-              <CardExtension
-                {...props}
-                {...componentParts}
-                title={props.title || title}
-                isCustomizable={isCustomizable}
-              />
-            );
-          };
-        }),
-    },
-  });
-}
-
-type CardExtensionComponentProps<T> = CardExtensionProps<T> &
-  ComponentParts & {
-    title: string;
-    isCustomizable?: boolean;
-    overrideTitle?: string;
-  };
-
-function CardExtension<T>(props: CardExtensionComponentProps<T>) {
-  const {
-    Renderer,
-    Content,
-    Settings,
-    Actions,
-    ContextProvider,
-    isCustomizable,
-    title,
-    ...childProps
-  } = props;
-  const app = useApp();
-  const { Progress } = app.getComponents();
-  const [settingsOpen, setSettingsOpen] = React.useState(false);
-
-  if (Renderer) {
-    return (
-      <Suspense fallback={<Progress />}>
-        <Renderer
-          title={title}
-          {...{
-            Content,
-            ...(Actions ? { Actions } : {}),
-            ...(Settings && !isCustomizable ? { Settings } : {}),
-            ...(ContextProvider ? { ContextProvider } : {}),
-            ...childProps,
-          }}
-        />
-      </Suspense>
-    );
-  }
-
-  const cardProps = {
-    title: title,
-    ...(Settings && !isCustomizable
-      ? {
-          action: (
-            <IconButton onClick={() => setSettingsOpen(true)}>
-              <SettingsIcon>Settings</SettingsIcon>
-            </IconButton>
-          ),
-        }
-      : {}),
-    ...(Actions
-      ? {
-          actions: <Actions />,
-        }
-      : {}),
-  };
-
-  const innerContent = (
-    <InfoCard {...cardProps}>
-      {Settings && !isCustomizable && (
-        <SettingsModal
-          open={settingsOpen}
-          componentName={title}
-          close={() => setSettingsOpen(false)}
-        >
-          <Settings />
-        </SettingsModal>
-      )}
-      <Content {...childProps} />
-    </InfoCard>
-  );
-
-  return (
-    <Suspense fallback={<Progress />}>
-      {ContextProvider ? (
-        <ContextProvider {...childProps}>{innerContent}</ContextProvider>
-      ) : (
-        innerContent
-      )}
-    </Suspense>
-  );
-}

plugins/home/src/plugin.ts

@@ -19,7 +19,7 @@ import {
   createPlugin,
   createRoutableExtension,
 } from '@backstage/core-plugin-api';
-import { createCardExtension } from './extensions';
+import { createCardExtension } from '@backstage/plugin-home-react';
 import { ToolkitContentProps } from './homePageComponents';
 import { rootRouteRef } from './routes';