fix(cards): replace instances of card.component.name (#1081)

cryostatio · Aug 5, 2023 · 52a0ef0 · 52a0ef0
1 parent 796d317
commit 52a0ef0
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 22 deletions.
diff --git a/src/app/Dashboard/AddCard.tsx b/src/app/Dashboard/AddCard.tsx
@@ -119,8 +119,8 @@ export const AddCard: React.FC<AddCardProps> = ({ variant, ..._props }) => {
     setShowWizard(false);
     const config = getCardDescriptorByTitle(selection, t);
     const cardConfig: CardConfig = {
-      id: `${config.component.name}-${nanoid()}`,
-      name: config.component.name,
+      id: `${config.component.cardComponentName}-${nanoid()}`,
+      name: config.component.cardComponentName,
       span: config.cardSizes.span.default,
       props: propsConfig,
     };

diff --git a/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.tsx b/src/app/Dashboard/AutomatedAnalysis/AutomatedAnalysisCard.tsx
@@ -97,7 +97,12 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { filter, first, map, tap } from 'rxjs';
-import { DashboardCardDescriptor, DashboardCardSizes, DashboardCardTypeProps } from '../dashboard-utils';
+import {
+  DashboardCardDescriptor,
+  DashboardCardFC,
+  DashboardCardSizes,
+  DashboardCardTypeProps,
+} from '../dashboard-utils';
 import { DashboardCard } from '../DashboardCard';
 import { AutomatedAnalysisCardList } from './AutomatedAnalysisCardList';
 import { AutomatedAnalysisConfigDrawer } from './AutomatedAnalysisConfigDrawer';
@@ -113,7 +118,7 @@ import { AutomatedAnalysisScoreFilter } from './Filters/AutomatedAnalysisScoreFi
 
 export interface AutomatedAnalysisCardProps extends DashboardCardTypeProps {}
 
-export const AutomatedAnalysisCard: React.FC<AutomatedAnalysisCardProps> = (props) => {
+export const AutomatedAnalysisCard: DashboardCardFC<AutomatedAnalysisCardProps> = (props) => {
   const context = React.useContext(ServiceContext);
   const addSubscription = useSubscriptions();
   const dispatch = useDispatch<StateDispatch>();
@@ -853,6 +858,8 @@ export const AutomatedAnalysisCard: React.FC<AutomatedAnalysisCardProps> = (prop
   );
 };
 
+AutomatedAnalysisCard.cardComponentName = 'AutomatedAnalysisCard';
+
 export type AutomatedAnalysisHeaderLabelType = 'critical' | 'warning' | 'ok';
 
 export interface AutomatedAnalysisHeaderLabelProps {

diff --git a/src/app/Dashboard/Charts/jfr/JFRMetricsChartCard.tsx b/src/app/Dashboard/Charts/jfr/JFRMetricsChartCard.tsx
@@ -15,7 +15,12 @@
  */
 
 import { CreateRecordingProps } from '@app/CreateRecording/CreateRecording';
-import { DashboardCardDescriptor, DashboardCardSizes, DashboardCardTypeProps } from '@app/Dashboard/dashboard-utils';
+import {
+  DashboardCardDescriptor,
+  DashboardCardFC,
+  DashboardCardSizes,
+  DashboardCardTypeProps,
+} from '@app/Dashboard/dashboard-utils';
 import { LoadingView } from '@app/LoadingView/LoadingView';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { FeatureLevel } from '@app/Shared/Services/Settings.service';
@@ -82,7 +87,7 @@ export function kindToId(kind: string): number {
   return JFRMetricsChartKind[kind];
 }
 
-export const JFRMetricsChartCard: React.FC<JFRMetricsChartCardProps> = (props) => {
+export const JFRMetricsChartCard: DashboardCardFC<JFRMetricsChartCardProps> = (props) => {
   const [t] = useTranslation();
   const serviceContext = React.useContext(ServiceContext);
   const controllerContext = React.useContext(ChartContext);
@@ -263,6 +268,8 @@ export const JFRMetricsChartCard: React.FC<JFRMetricsChartCardProps> = (props) =
   );
 };
 
+JFRMetricsChartCard.cardComponentName = 'JFRMetricsChartCard';
+
 export const JFRMetricsChartCardSizes: DashboardCardSizes = {
   span: {
     minimum: 3,

diff --git a/src/app/Dashboard/Charts/mbean/MBeanMetricsChartCard.tsx b/src/app/Dashboard/Charts/mbean/MBeanMetricsChartCard.tsx
@@ -14,7 +14,12 @@
  * limitations under the License.
  */
 
-import { DashboardCardDescriptor, DashboardCardSizes, DashboardCardTypeProps } from '@app/Dashboard/dashboard-utils';
+import {
+  DashboardCardDescriptor,
+  DashboardCardFC,
+  DashboardCardSizes,
+  DashboardCardTypeProps,
+} from '@app/Dashboard/dashboard-utils';
 import { ThemeSetting, ThemeType } from '@app/Settings/SettingsUtils';
 import { MBeanMetrics } from '@app/Shared/Services/Api.service';
 import { ServiceContext } from '@app/Shared/Services/Services';
@@ -357,7 +362,7 @@ function getChartKindByName(name: string): MBeanMetricsChartKind {
   return chartKinds.filter((k) => k.displayName === name)[0];
 }
 
-export const MBeanMetricsChartCard: React.FC<MBeanMetricsChartCardProps> = (props) => {
+export const MBeanMetricsChartCard: DashboardCardFC<MBeanMetricsChartCardProps> = (props) => {
   const { t } = useTranslation();
   const [theme] = useTheme();
   const serviceContext = React.useContext(ServiceContext);
@@ -477,6 +482,8 @@ export const MBeanMetricsChartCard: React.FC<MBeanMetricsChartCardProps> = (prop
   );
 };
 
+MBeanMetricsChartCard.cardComponentName = 'MBeanMetricsChartCard';
+
 export const MBeanMetricsChartCardSizes: DashboardCardSizes = {
   span: {
     minimum: 2,

diff --git a/src/app/Dashboard/ErrorCard.tsx b/src/app/Dashboard/ErrorCard.tsx
@@ -31,7 +31,13 @@ import {
 import { WrenchIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { CardConfig, CardValidationResult, DashboardCardSizes, DashboardCardTypeProps } from './dashboard-utils';
+import {
+  CardConfig,
+  CardValidationResult,
+  DashboardCardFC,
+  DashboardCardSizes,
+  DashboardCardTypeProps,
+} from './dashboard-utils';
 import { DashboardCard } from './DashboardCard';
 
 export interface ErrorCardProps extends DashboardCardTypeProps {
@@ -40,7 +46,7 @@ export interface ErrorCardProps extends DashboardCardTypeProps {
 }
 
 // TODO: Fix title + design body
-export const ErrorCard: React.FC<ErrorCardProps> = ({
+export const ErrorCard: DashboardCardFC<ErrorCardProps> = ({
   validationResult,
   cardConfig: _cardConfig,
   dashboardId,
@@ -91,6 +97,8 @@ export const ErrorCard: React.FC<ErrorCardProps> = ({
   );
 };
 
+ErrorCard.cardComponentName = 'ErrorCard';
+
 export const ErrorCardSizes: DashboardCardSizes = {
   span: {
     minimum: 2,

diff --git a/src/app/Dashboard/JvmDetails/JvmDetailsCard.tsx b/src/app/Dashboard/JvmDetails/JvmDetailsCard.tsx
@@ -24,13 +24,18 @@ import { useSubscriptions } from '@app/utils/useSubscriptions';
 import { CardActions, CardBody, CardHeader } from '@patternfly/react-core';
 import { ContainerNodeIcon } from '@patternfly/react-icons';
 import * as React from 'react';
-import { DashboardCardDescriptor, DashboardCardSizes, DashboardCardTypeProps } from '../dashboard-utils';
+import {
+  DashboardCardDescriptor,
+  DashboardCardFC,
+  DashboardCardSizes,
+  DashboardCardTypeProps,
+} from '../dashboard-utils';
 import { DashboardCard } from '../DashboardCard';
 import '@app/Topology/styles/base.css';
 
 export interface JvmDetailsCardProps extends DashboardCardTypeProps {}
 
-export const JvmDetailsCard: React.FC<JvmDetailsCardProps> = (props) => {
+export const JvmDetailsCard: DashboardCardFC<JvmDetailsCardProps> = (props) => {
   const context = React.useContext(ServiceContext);
   const addSubscription = useSubscriptions();
 
@@ -78,6 +83,8 @@ export const JvmDetailsCard: React.FC<JvmDetailsCardProps> = (props) => {
   );
 };
 
+JvmDetailsCard.cardComponentName = 'JvmDetailsCard';
+
 export const JvmDetailsCardSizes: DashboardCardSizes = {
   span: {
     minimum: 4,

diff --git a/src/app/Dashboard/LayoutTemplateUploadModal.tsx b/src/app/Dashboard/LayoutTemplateUploadModal.tsx
@@ -96,7 +96,7 @@ export const LayoutTemplateUploadModal: React.FC<LayoutTemplateUploadModalProps>
               Object.keys(cardConfig).length !== Object.keys(mockSerialCardConfig).length ||
               cardConfig.name === undefined ||
               !getDashboardCards()
-                .map((c) => c.component.name)
+                .map((c) => c.component.cardComponentName)
                 .includes(cardConfig.name) ||
               cardConfig.span === undefined ||
               cardConfig.props === undefined

diff --git a/src/app/Dashboard/dashboard-utils.tsx b/src/app/Dashboard/dashboard-utils.tsx
@@ -173,7 +173,7 @@ export const getUniqueIncrementingName = (init = 'Custom', names: string[]): str
 
 export function hasCardDescriptorByName(name: string): boolean {
   for (const choice of getDashboardCards()) {
-    if (choice.component.name === name) {
+    if (choice.component.cardComponentName === name) {
       return true;
     }
   }
@@ -182,7 +182,7 @@ export function hasCardDescriptorByName(name: string): boolean {
 
 export function getCardDescriptorByName(name: string): DashboardCardDescriptor {
   for (const choice of getDashboardCards()) {
-    if (choice.component.name === name) {
+    if (choice.component.cardComponentName === name) {
       return choice;
     }
   }
@@ -368,10 +368,13 @@ export interface DashboardCardDescriptor {
   cardSizes: DashboardCardSizes;
   description: string;
   descriptionFull: JSX.Element | string;
-  component: React.FC<any>;
+  component: DashboardCardFC<any>;
   propControls: PropControl[];
   advancedConfig?: JSX.Element;
 }
+export type DashboardCardFC<P> = React.FC<P> & {
+  cardComponentName: string;
+};
 
 export interface PropControlExtra {
   displayMapper?: (value: string) => string /* only has effect with 'select' PropControl kind */;

diff --git a/src/app/Shared/Redux/Configurations/DashboardConfigSlice.tsx b/src/app/Shared/Redux/Configurations/DashboardConfigSlice.tsx
@@ -280,8 +280,8 @@ export const dashboardConfigReducer = createReducer(INITIAL_STATE, (builder) =>
     .addCase(dashboardConfigFirstRunIntent, (state) => {
       state.layouts[state.current].cards = [
         {
-          id: `${MBeanMetricsChartCardDescriptor.component.name}-1`,
-          name: MBeanMetricsChartCardDescriptor.component.name,
+          id: `${MBeanMetricsChartCardDescriptor.component.cardComponentName}-1`,
+          name: MBeanMetricsChartCardDescriptor.component.cardComponentName,
           span: MBeanMetricsChartCardDescriptor.cardSizes.span.default,
           props: {
             themeColor: 'blue',
@@ -291,8 +291,8 @@ export const dashboardConfigReducer = createReducer(INITIAL_STATE, (builder) =>
           },
         },
         {
-          id: `${MBeanMetricsChartCardDescriptor.component.name}-2`,
-          name: MBeanMetricsChartCardDescriptor.component.name,
+          id: `${MBeanMetricsChartCardDescriptor.component.cardComponentName}-2`,
+          name: MBeanMetricsChartCardDescriptor.component.cardComponentName,
           span: MBeanMetricsChartCardDescriptor.cardSizes.span.default,
           props: {
             themeColor: 'purple',
@@ -302,8 +302,8 @@ export const dashboardConfigReducer = createReducer(INITIAL_STATE, (builder) =>
           },
         },
         {
-          id: `${MBeanMetricsChartCardDescriptor.component.name}-3`,
-          name: MBeanMetricsChartCardDescriptor.component.name,
+          id: `${MBeanMetricsChartCardDescriptor.component.cardComponentName}-3`,
+          name: MBeanMetricsChartCardDescriptor.component.cardComponentName,
           span: MBeanMetricsChartCardDescriptor.cardSizes.span.default,
           props: {
             themeColor: 'green',